/* Shared page components, based on Developer's glass skin.
   Load after the shell and before hx-glass-tables.css. Screen-only so invoice
   printing keeps its document layout. Glass controls sit above quiet panels;
   no per-card blur, DOM relocation, or page-specific JavaScript is required. */
@media screen {
  body.hx-body-glass-shell {
    --hx-page-font: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--hx-font-sans, "Inter"), sans-serif;
    --hx-page-text: #f5f7fb;
    --hx-page-muted: #b1bbcc;
    --hx-page-line: rgba(235, 243, 255, .10);
    --hx-page-surface: rgba(20, 25, 34, .96);
    --hx-page-control: #303949;
    --hx-page-edge: rgba(239, 247, 255, .20);
    --hx-page-highlight: rgba(255, 255, 255, .10);
    --hx-page-radius: 22px;
    --hx-toolbar-control-height: 50px;
    --hx-page-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 36px rgba(0, 0, 0, .16);
    /* Bridge the older custom power/renew/pay controls to the same palette. */
    --hx-btn-font-size: 13px;
    --hx-btn-line-height: 20px;
    --hx-btn-font-weight: 600;
    --hx-btn-radius: 999px;
    --hx-btn-primary-bg: linear-gradient(170deg, #0752ad, #063d82);
    --hx-btn-primary-bg-hover: linear-gradient(170deg, #0a5ec0, #084b9f);
    --hx-btn-primary-border: rgba(138, 194, 255, .42);
    --hx-btn-primary-border-hover: #88baff;
    --hx-btn-primary-color: #fff;
    --hx-btn-primary-color-hover: #fff;
    --hx-btn-soft-bg: linear-gradient(160deg, var(--hx-page-highlight), rgba(255, 255, 255, .02)), var(--hx-page-control);
    --hx-btn-soft-bg-hover: #45536a;
    --hx-btn-soft-bg-active: #45536a;
    --hx-btn-soft-border: var(--hx-page-edge);
    --hx-btn-soft-color: #f5f8ff;
    --hx-btn-soft-color-hover: #fff;
  }

  /* One content origin for Developer, grid pages, documents and legacy pages.
     The extra shell class deliberately outranks the old full-bleed :has rules. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner {
    --hx-support-text: var(--hx-page-text);
    --hx-support-muted: var(--hx-page-muted);
    --hx-card-radius: var(--hx-page-radius);
    --hx-pd-tab-radius: var(--hx-page-radius);
    --hx-card-line: var(--hx-page-line);
    --hx-card-header-pad-y: 24px;
    --hx-card-header-pad-x: 26px;
    --hx-card-content-pad: 26px;
    --hx-shell-grid-head-pad-y: 8px;
    display: block;
    padding-top: 0;
    color: var(--hx-page-text);
    font-family: var(--hx-page-font) !important;
    font-size: 13px;
    line-height: 1.55;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner > .hx-app-shell-container {
    display: block;
    max-width: var(--hx-shell-grid-container-width, var(--hx-shell-content-max-width, 1400px));
    padding: var(--hx-shell-container-pad-top, 28px) var(--hx-shell-content-gutter, 32px) 36px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner > .hx-app-shell-container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner .primary-content.col-12 {
    display: block;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--hx-page-font) !important;
    font-size: inherit;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .primary-content > .alert {
    margin: 0 0 24px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-grid {
    display: block;
    min-height: 0;
    border: 0;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-grid__body {
    padding: 0;
    gap: 24px;
    font-family: var(--hx-page-font) !important;
  }

  /* Existing contextual headings and the fallback heading share the same rhythm. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading, .hx-servers-grid__head) {
    margin: 0 0 28px;
    padding: 8px 0;
    border: 0;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-grid__head > .d-flex { gap: 16px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-grid__head > .d-flex > div:first-child { margin-bottom: 0 !important; min-width: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading h1, .hx-servers-grid__title) {
    margin: 0 0 6px !important;
    color: var(--hx-page-text);
    font-family: var(--hx-page-font) !important;
    font-size: 32px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.9px;
    overflow-wrap: break-word;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading, .hx-servers-grid__head) p {
    margin: 0;
    color: var(--hx-page-muted) !important;
    font-size: 13px;
    line-height: 1.55;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    min-height: var(--hx-toolbar-control-height);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar > .hx-servers-datatable__search { flex: 1 1 280px; min-width: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar > .btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: var(--hx-toolbar-control-height); min-height: var(--hx-toolbar-control-height); margin-left: auto; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar.justify-content-end > .btn { margin-left: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar:empty { display: none; }
  /* Keep Developer tabs/buttons and list search controls on one size token. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-dev-toolbar { --dev-toolbar-height: var(--hx-toolbar-control-height); }

  /* Panels retain visible overflow for menus; only table scrollers clip. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card, .panel, .well, .hx-support-card, .affiliate-stat-card, .hx-pd-tab-panel-card, .invoice-container) {
    border: 1px solid var(--hx-page-line);
    border-radius: var(--hx-page-radius);
    background: var(--hx-page-surface);
    box-shadow: var(--hx-page-shadow);
    color: var(--hx-page-text);
    overflow: visible;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card, .panel, .well, .alert, .list-group, .nav, .form-control, .btn) { font-family: var(--hx-page-font) !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-header, .panel-heading, .hx-pd-tab-panel-header) {
    padding: 24px 26px;
    border-bottom: 1px solid var(--hx-page-line);
    border-radius: var(--hx-page-radius) var(--hx-page-radius) 0 0;
    color: var(--hx-page-text);
    background: transparent !important;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-title, .panel-title, .hx-pd-tab-panel-header__title) {
    color: var(--hx-page-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.35px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-body, .panel-body, .hx-pd-tab-panel-content) { padding: 26px; font-size: 13px; line-height: 1.55; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-footer, .panel-footer) {
    padding: 16px 26px;
    border-top: 1px solid var(--hx-page-line) !important;
    border-radius: 0 0 var(--hx-page-radius) var(--hx-page-radius);
    background: rgba(255, 255, 255, .015) !important;
    font-size: 13px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .primary-content p { font-size: 13px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .text-muted { color: var(--hx-page-muted) !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .list-group-item { border-color: var(--hx-page-line); background: transparent; color: var(--hx-page-text); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .list-group-item-action:hover { background: rgba(207, 227, 255, .055); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .list-group-item.active { background: #214570; color: #fff; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .invoice-container { width: 100%; max-width: none; margin: 0; padding: 26px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .invoice-container .invoice-header { margin-top: 0; }

  /* CSS variables keep semantic button variants, disabled states and hover in sync.
     Modals can be moved to body by Bootstrap, hence the second scope. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn:where(:not(.btn-link):not(.hx-modal-btn-action)),
  body.hx-body-glass-shell .modal .btn:where(:not(.btn-link):not(.hx-modal-btn-action)) {
    --hx-btn-bg: linear-gradient(160deg, var(--hx-page-highlight), rgba(255, 255, 255, .02)), var(--hx-page-control);
    --hx-btn-hover: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)), #45536a;
    --hx-btn-edge: var(--hx-page-edge);
    --hx-btn-text: #f5f8ff;
    min-height: 40px;
    padding: 9px 17px;
    border: 1px solid var(--hx-btn-edge) !important;
    border-radius: 999px !important;
    background: var(--hx-btn-bg) !important;
    color: var(--hx-btn-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 3px 9px rgba(0, 0, 0, .14);
    font-family: var(--hx-page-font) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-primary,
  body.hx-body-glass-shell .modal .btn.btn-primary {
    --hx-btn-bg: var(--hx-btn-primary-bg);
    --hx-btn-hover: var(--hx-btn-primary-bg-hover);
    --hx-btn-edge: var(--hx-btn-primary-border);
  }
  /* Developer ships its own skin; keep its primary actions on the shared palette. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-dev-btn--primary,
  body.hx-body-glass-shell .hx-dev-modal .hx-dev-btn--primary { background: var(--hx-btn-primary-bg); border-color: var(--hx-btn-primary-border); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-dev-btn--primary:hover,
  body.hx-body-glass-shell .hx-dev-modal .hx-dev-btn--primary:hover { background: var(--hx-btn-primary-bg-hover); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-danger,
  body.hx-body-glass-shell .modal .btn.btn-danger {
    --hx-btn-bg: linear-gradient(170deg, #bd343d, #9c242d);
    --hx-btn-hover: linear-gradient(170deg, #ce3c45, #ac2a34);
    --hx-btn-edge: rgba(255, 183, 189, .35);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-success,
  body.hx-body-glass-shell .modal .btn.btn-success {
    --hx-btn-bg: linear-gradient(170deg, #247649, #195b37);
    --hx-btn-hover: linear-gradient(170deg, #2b8754, #206e43);
    --hx-btn-edge: rgba(117, 227, 164, .30);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-warning,
  body.hx-body-glass-shell .modal .btn.btn-warning {
    --hx-btn-bg: linear-gradient(170deg, #71501f, #5b4019);
    --hx-btn-hover: linear-gradient(170deg, #856028, #71501f);
    --hx-btn-edge: rgba(238, 197, 119, .35);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn:is(.btn-info, .btn-outline-primary, .btn-outline-info),
  body.hx-body-glass-shell .modal .btn:is(.btn-info, .btn-outline-primary, .btn-outline-info) { --hx-btn-text: #a7d0ff; --hx-btn-edge: rgba(138, 194, 255, .42); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-outline-danger,
  body.hx-body-glass-shell .modal .btn.btn-outline-danger { --hx-btn-text: #ffaaa9; --hx-btn-edge: rgba(255, 183, 189, .35); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn:not(.btn-link):not(.hx-modal-btn-action):not(:disabled):not(.disabled):hover,
  body.hx-body-glass-shell .modal .btn:not(.btn-link):not(.hx-modal-btn-action):not(:disabled):not(.disabled):hover {
    background: var(--hx-btn-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 5px 14px rgba(0, 0, 0, .20);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn:is(:disabled, .disabled),
  body.hx-body-glass-shell .modal .btn:is(:disabled, .disabled) { opacity: .5; box-shadow: none; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn:is(.btn-sm, .btn-xs),
  body.hx-body-glass-shell .modal .btn:is(.btn-sm, .btn-xs) { --hx-btn-font-size: 12px; min-height: 32px; padding: 5px 13px; font-size: 12px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn.btn-lg,
  body.hx-body-glass-shell .modal .btn.btn-lg { min-height: 48px; padding: 13px 22px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn-link,
  body.hx-body-glass-shell .modal .btn-link { color: #a7d0ff; font-family: var(--hx-page-font) !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(a, button).hx-pd-hero-action-link,
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(a, button).hx-pd-hero-action-link .hx-system-status-text {
    font-family: var(--hx-page-font) !important;
    font-size: 13px;
    font-weight: 600;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(a, button).hx-pd-hero-action-link { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 3px 9px rgba(0, 0, 0, .14); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-icon-btn { border-radius: 50%; }

  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select, .custom-file-label, .input-group-text),
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select, .custom-file-label, .input-group-text) {
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid rgba(222, 235, 255, .16);
    border-radius: 12px;
    background-color: rgba(6, 12, 23, .46);
    color: var(--hx-page-text) !important;
    -webkit-text-fill-color: currentColor;
    font-family: var(--hx-page-font) !important;
    font-size: 13px;
    line-height: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .form-control:not(textarea):not(select),
  body.hx-body-glass-shell .modal .form-control:not(textarea):not(select) { height: auto; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(select.form-control, .custom-select),
  body.hx-body-glass-shell .modal :is(select.form-control, .custom-select) { height: auto; padding-right: 32px; color-scheme: dark; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body select.custom-select,
  body.hx-body-glass-shell .modal select.custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b1bbcc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body select option,
  body.hx-body-glass-shell .modal select option { background: #202734; color: #f5f7fb; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .form-control::placeholder,
  body.hx-body-glass-shell .modal .form-control::placeholder { color: #a0aec4; opacity: 1; -webkit-text-fill-color: currentColor; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select):focus,
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select):focus { border-color: #88baff; background-color: rgba(8, 17, 31, .65); box-shadow: 0 0 0 3px rgba(136, 186, 255, .15); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select):disabled,
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select):disabled { opacity: .6; cursor: not-allowed; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select).is-invalid,
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select).is-invalid { border-color: #ffaaa9; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select).is-valid,
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select).is-valid { border-color: #91eab1; }

  /* Joined controls keep square internal seams; editor/icon buttons stay compact. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body .input-group > :is(.form-control, .custom-select):not(:last-child),
  body.hx-body-glass-shell .modal .input-group > :is(.form-control, .custom-select):not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .input-group > :is(.form-control, .custom-select):not(:first-child),
  body.hx-body-glass-shell .modal .input-group > :is(.form-control, .custom-select):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .input-group-append > :is(.btn, .input-group-text),
  body.hx-body-glass-shell .modal .input-group-append > :is(.btn, .input-group-text) { border-radius: 0 12px 12px 0 !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .input-group-prepend > :is(.btn, .input-group-text),
  body.hx-body-glass-shell .modal .input-group-prepend > :is(.btn, .input-group-text) { border-radius: 12px 0 0 12px !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .md-editor .btn { min-height: 32px; padding: 5px 9px; border-radius: 8px !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .md-editor { border-color: var(--hx-page-line); border-radius: 12px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .md-editor > .btn-toolbar { background: var(--hx-page-surface); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .alert { border-radius: 14px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .dropdown-menu,
  body.hx-body-glass-shell .modal .dropdown-menu { border: 1px solid var(--hx-page-edge); border-radius: 14px; background: #202734; color: var(--hx-page-text); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .dropdown-item,
  body.hx-body-glass-shell .modal .dropdown-item { color: var(--hx-page-text); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .dropdown-item:is(:hover, :focus, .active),
  body.hx-body-glass-shell .modal .dropdown-item:is(:hover, :focus, .active) { background: rgba(207, 227, 255, .10); }

  /* Segmented navigation, including the management tabs' existing moving pill. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.nav-tabs, .nav-pills, .hx-pd-bracket-tabs__list) {
    width: fit-content;
    max-width: 100%;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--hx-page-edge);
    border-radius: 26px;
    background: linear-gradient(145deg, var(--hx-page-highlight), rgba(255, 255, 255, .02)), var(--hx-page-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(0, 0, 0, .22);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.nav-tabs, .nav-pills) .nav-link {
    min-height: 38px;
    padding: 8px 20px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #c2cddd;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.nav-tabs, .nav-pills) .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.nav-tabs, .nav-pills) .nav-link.active,
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tabs__slider,
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tabs:not(.hx-pd-bracket-tabs--has-slider) .hx-pd-bracket-tab[aria-selected="true"] .hx-pd-bracket-tab__fill {
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 999px;
    background: linear-gradient(165deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .09));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 7px rgba(0, 0, 0, .20);
  }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tabs { gap: 24px; font-family: var(--hx-page-font) !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tab__inner { padding: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tab__fill { padding: 9px 20px; min-height: 38px; opacity: 1; color: #c2cddd; font: 600 13px/20px var(--hx-page-font); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tab[aria-selected="true"] .hx-pd-bracket-tab__fill { color: #fff; }

  /* Server overview uses the same inset, keeping its live controls and animations. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-overview-grid { min-height: 0; border: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-pd-overview-grid, .hx-pd-hero-title-layout) { --hx-pd-hero-hostname-size: 32px; --hx-pd-hero-hostname-line: 1.15; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-hero-inner { padding-left: 0; padding-right: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-overview-grid-head { padding-top: 8px; padding-bottom: 8px; margin-bottom: 28px; border: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-overview-grid-section { padding-top: 24px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-pd-hostname, .hx-pd-hostname-input) { font-family: var(--hx-page-font) !important; font-size: var(--hx-pd-hero-hostname-size) !important; font-weight: 650 !important; letter-spacing: -.9px !important; line-height: var(--hx-pd-hero-hostname-line) !important; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-tab-panel-header__inner { gap: 16px; flex-wrap: wrap; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-tab-panel-header .hx-pd-tab-panel-header__title { font-size: 18px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-tab-panel-header { height: auto; min-height: 88px; }

  /* Checkout stays a configurator; its outer panels use the shared material. */
  #whmcs-tw-app-shell.hx-shell-glass #main-body #hx-order-configurator { font-family: var(--hx-page-font); }
  #whmcs-tw-app-shell.hx-shell-glass #main-body #hx-order-configurator .hx-order-form { border: 0; background: transparent; box-shadow: none; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body #hx-order-configurator .hx-order-form > .card-body { padding: 0; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body #hx-order-configurator :is(.hx-config-group, .hx-order-aside__inner) { border-color: var(--hx-page-line); border-radius: var(--hx-page-radius); background: var(--hx-page-surface); box-shadow: var(--hx-page-shadow); }

  /* Floating Bootstrap dialogs, including those portalled outside the shell. */
  body.hx-body-glass-shell .modal .modal-content { border: 1px solid rgba(229, 242, 255, .25) !important; border-radius: 26px; background: linear-gradient(150deg, rgba(255, 255, 255, .065), transparent 55%), #202734 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 80px rgba(0, 0, 0, .5); font-family: var(--hx-page-font) !important; }
  body.hx-body-glass-shell .modal :is(.modal-header, .modal-body, .modal-footer) { background: transparent !important; color: var(--hx-page-text); border-color: var(--hx-page-line) !important; font-size: 13px; }
  body.hx-body-glass-shell .modal .modal-header { padding: 22px 26px; }
  body.hx-body-glass-shell .modal .modal-body { padding: 26px; }
  body.hx-body-glass-shell .modal .modal-footer { padding: 18px 26px; }
  body.hx-body-glass-shell .modal .modal-title { font-size: 20px; font-weight: 600; letter-spacing: -.45px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(a, button, input, select, textarea, [tabindex]):focus-visible,
  body.hx-body-glass-shell .modal :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #9bcaff; outline-offset: 3px; }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner > .hx-app-shell-container { padding: var(--hx-shell-container-pad-top, 22px) var(--hx-shell-content-gutter, 24px) 30px; }
}
@media screen and (max-width: 767.98px) {
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner > .hx-app-shell-container { padding: var(--hx-shell-container-pad-top, 24px) var(--hx-shell-content-gutter, 20px) 28px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-toolbar { gap: 12px; }
}
@media screen and (max-width: 640px) {
  body.hx-body-glass-shell { --hx-page-radius: 18px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body.hx-app-main-inner { --hx-card-header-pad-y: 20px; --hx-card-header-pad-x: 20px; --hx-card-content-pad: 20px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading, .hx-servers-grid__head) { margin-bottom: 24px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading h1, .hx-servers-grid__title, .hx-pd-hostname) { font-size: 27px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-pd-overview-grid, .hx-pd-hero-title-layout) { --hx-pd-hero-hostname-size: 27px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-page-heading, .hx-servers-grid__head) p { font-size: 12px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-header, .card-body, .panel-heading, .panel-body, .hx-pd-tab-panel-header, .hx-pd-tab-panel-content, .invoice-container) { padding: 20px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.card-footer, .panel-footer) { padding: 14px 18px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-grid__body { gap: 20px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body :is(.form-control, .custom-select),
  body.hx-body-glass-shell .modal :is(.form-control, .custom-select) { font-size: 16px; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-bracket-tab__fill { padding-inline: 14px; }
  body.hx-body-glass-shell .modal .modal-content { border-radius: 22px; }
  body.hx-body-glass-shell .modal :is(.modal-header, .modal-body, .modal-footer) { padding: 20px; }
}
@media screen and (max-width: 640px) {
  body.hx-body-glass-shell { --hx-toolbar-control-height: 52px; }
}
@media screen and (prefers-reduced-transparency: reduce), screen and (prefers-contrast: more) {
  body.hx-body-glass-shell { --hx-page-surface: #141922; --hx-page-muted: #d1d9e6; --hx-page-line: #626f84; --hx-page-highlight: transparent; }
}
@media screen and (forced-colors: active) {
  body.hx-body-glass-shell { --hx-page-text: CanvasText; --hx-page-muted: CanvasText; --hx-page-surface: Canvas; --hx-page-control: ButtonFace; --hx-page-edge: ButtonText; --hx-page-line: CanvasText; --hx-page-shadow: none; }
  #whmcs-tw-app-shell.hx-shell-glass #main-body .btn,
  body.hx-body-glass-shell .modal .btn { background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText !important; }
}