/*
 * HostAccent Premium v3 — next-level product experience.
 * This file intentionally layers over premium-v2.css and the Twenty-One
 * parent so future WHMCS updates do not require template forks.
 */

:root {
    --ha3-canvas: #f4f7fc;
    --ha3-surface: rgba(255, 255, 255, .94);
    --ha3-surface-solid: #fff;
    --ha3-surface-soft: #f7f9fd;
    --ha3-ink: #101b2f;
    --ha3-copy: #53627a;
    --ha3-muted: #65718a;
    --ha3-line: rgba(106, 125, 156, .14);
    --ha3-blue: #367ff5;
    --ha3-violet: #775bf7;
    --ha3-cyan: #21b8e8;
    --ha3-green: #18b784;
    --ha3-red: #ef4755;
    --ha3-amber: #eca72c;
    --ha3-navy: #0b1628;
    /*
     * Readable pairs for the accents above.
     *
     * The plain --ha3-blue/cyan/green/red/amber values are tuned for gradients,
     * tinted chips and decoration; as text or as a solid fill behind white they
     * measured 2.07:1 - 3.81:1, below the 4.5:1 WCAG AA minimum. Use the -text
     * token for any foreground colour, icon glyph or solid fill that carries
     * white text; use the plain token for decoration only. Both are redefined
     * for the dark scheme further down.
     *
     * Measured on --ha3-surface-solid (#fff) / --ha3-canvas (#f4f7fc):
     *   muted      4.90 / 4.57      blue-text  5.82 / 5.42
     *   green-text 5.12 / 4.76      amber-text 5.48 / 5.11
     *   cyan-text  5.70 / 5.31      red-text   5.66 / 5.27
     */
    --ha3-blue-text: #1f5fd0;
    --ha3-cyan-text: #0b6f8f;
    --ha3-green-text: #0f7d5b;
    --ha3-red-text: #c4283a;
    --ha3-amber-text: #8a6206;
    --ha3-focus: #1f5fd0;
    /* Shared height for every control in the header toolbar. */
    --ha3-control-h: 42px;
    /*
     * HostAccent brand red, deepened just enough to carry white text.
     * custom.css --ha-brand (#ef3340) measures 4.02:1 behind white and its
     * button gradient drops to 3.27:1 at the light end. These two values keep
     * the same hue at 5.13:1 and 4.73:1. --ha-brand itself is untouched, so
     * every decorative use of the brand red is unchanged; revert the primary
     * surfaces by pointing these two at #ef3340 / #f15b65.
     */
    --ha3-brand-fill: #d61f2d;
    --ha3-brand-fill-2: #e02231;
    /*
     * Action-button fills. Every value carries white text at 5.12:1 or better,
     * and the same values work in both schemes because the fill is opaque.
     *
     * Blue is the primary action, red is reserved for destructive actions
     * (reinstall, cancel, delete). Bootstrap's .btn-primary previously used the
     * brand red, which put "Add Funds" and "Request reinstall" in the same
     * colour; --ha3-brand-fill is now only used where the brand red is asked
     * for explicitly.
     */
    --ha3-action: #1f5fd0;
    --ha3-action-2: #5340c8;
    --ha3-action-hover: #1a4fb0;
    --ha3-action-hover-2: #4b37b8;
    --ha3-danger: #c4283a;
    --ha3-danger-2: #a81f2f;
    --ha3-danger-hover: #a81f2f;
    --ha3-danger-hover-2: #8d1826;
    --ha3-success-fill: #0f7d5b;
    --ha3-info-fill: #0b6f8f;
    --ha3-shadow-xs: 0 8px 24px rgba(27, 45, 78, .055);
    --ha3-shadow-sm: 0 16px 42px rgba(27, 45, 78, .085);
    --ha3-shadow-lg: 0 30px 90px rgba(16, 31, 57, .16);
    --ha3-radius: 16px;
    --ha3-radius-lg: 23px;
}

html[data-ha-theme="dark"] {
    --ha3-canvas: #08111f;
    --ha3-surface: rgba(15, 28, 48, .93);
    --ha3-surface-solid: #0f1c30;
    --ha3-surface-soft: #12213a;
    --ha3-ink: #edf4ff;
    --ha3-copy: #a8b6ca;
    /* #76859c measured 4.30:1 on --ha3-surface-soft, just under AA. */
    --ha3-muted: #808fa6;
    --ha3-line: rgba(159, 183, 220, .13);
    /*
     * On the dark canvas the readable direction is lighter, not darker.
     * Measured on surface / canvas / soft: blue 7.47/8.27/7.04,
     * cyan 8.88/9.84/8.37, green 9.28/10.27/8.75, red 6.85/7.59/6.46,
     * amber 9.48/10.50/8.94.
     */
    --ha3-blue-text: #7bacff;
    --ha3-cyan-text: #4cc9f0;
    --ha3-green-text: #45d6a4;
    --ha3-red-text: #ff7b85;
    --ha3-amber-text: #f0b849;
    --ha3-focus: #7bacff;
    --ha3-shadow-xs: 0 8px 25px rgba(0, 0, 0, .18);
    --ha3-shadow-sm: 0 18px 50px rgba(0, 0, 0, .25);
    --ha3-shadow-lg: 0 32px 100px rgba(0, 0, 0, .34);
    color-scheme: dark;
}

body.ha-v3-ready {
    color: var(--ha3-ink);
    background: radial-gradient(circle at 4% 18%, rgba(33, 184, 232, .07), transparent 25rem),
        radial-gradient(circle at 96% 20%, rgba(119, 91, 247, .065), transparent 26rem),
        var(--ha3-canvas);
    transition: color .2s ease, background-color .2s ease;
}

body.ha-v3-ready .card,
body.ha-v3-ready .panel,
body.ha-v3-ready .well,
body.ha-v3-ready .modal-content,
body.ha-v3-ready .dropdown-menu {
    color: var(--ha3-ink);
    background-color: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
}

body.ha-v3-ready .text-muted,
body.ha-v3-ready small,
body.ha-v3-ready .dataTables_info {
    color: var(--ha3-muted) !important;
}

body.ha-v3-ready .form-control,
body.ha-v3-ready .custom-select,
body.ha-v3-ready select,
body.ha-v3-ready textarea {
    color: var(--ha3-ink);
    background-color: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
}

/* Top application controls */

.ha-v3-command-trigger {
    min-width: 168px;
    height: 42px;
    display: flex;
    align-items: center;
    margin-right: 2px;
    padding: 0 9px 0 13px;
    gap: 9px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.ha-v3-command-trigger:hover,
.ha-v3-command-trigger:focus {
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border-color: rgba(54, 127, 245, .27);
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v3-command-trigger > span {
    flex: 1;
}

.ha-v3-command-trigger kbd {
    padding: 4px 6px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 7px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
    font-family: inherit;
    font-size: 8px;
}

/* ---------------------------------------------------------------------------
   Dark surfaces: re-point the neutral tokens instead of fighting specificity

   `body.ha-v3-ready small` sets color: var(--ha3-muted) !important on every
   <small> in the client area, including the ones sitting on the dark hero,
   rail and auth panels, where a light-surface grey is unreadable. Custom
   properties inherit, so redefining the neutrals on each dark container makes
   that blanket rule - and every other var(--ha3-muted) consumer - resolve to a
   value that works there. No !important and no specificity escalation needed.

   Measured against the darkest and lightest stops of these gradients:
   muted 6.69:1 - 8.31:1, copy 9.02:1 - 11.2:1.
   --------------------------------------------------------------------------- */

.ha-dashboard-hero,
.ha-side-rail,
.ha-v3-auth-story,
.ha-v3-next-action,
.ha-v3-register-story,
.ha-v4-cpanel-header,
.ha-v4-service-summary,
.ha-v5-domain-hero {
    --ha3-muted: rgba(220, 233, 252, .72);
    --ha3-copy: rgba(232, 241, 254, .86);
    --ha3-ink: #ffffff;
    --ha3-focus: #ffffff;
}

/* ---------------------------------------------------------------------------
   Header toolbar: one control height

   premium-v2.css gives .ha-top-icon a 42px height and .ha-top-account-trigger a
   44px min-height, which the avatar pushed to 46px in practice. Sitting in one
   row, that made the search trigger and the icon buttons read as shorter than
   the account chip beside them. All of them now share --ha3-control-h.
   --------------------------------------------------------------------------- */

body.ha-client-shell .ha-top-icon,
body.ha-client-shell .ha-header-actions > .btn,
.ha-v3-command-trigger,
.ha-top-account-trigger {
    height: var(--ha3-control-h);
    min-height: var(--ha3-control-h);
}

/* Keep the avatar inside the shared height. */
.ha-top-account-trigger .ha-top-avatar {
    width: calc(var(--ha3-control-h) - 10px);
    height: calc(var(--ha3-control-h) - 10px);
    flex: 0 0 calc(var(--ha3-control-h) - 10px);
}

.ha-top-account-copy small,
.ha-top-account-copy strong {
    line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   Action buttons

   Two problems are fixed here.

   1. Bootstrap sets `.btn:hover { color: #212529 }`. Every custom control in
      this theme also carries `.btn` for the parent theme's sizing, and most of
      them only declared a colour in their base rule, so hovering turned the
      label near-black - unreadable on the dark scheme (1.34:1) and wrong on the
      light one. Each button now declares its colour for hover, focus and active
      as well, so the Bootstrap rule can never win.

   2. Solid fills carried white text at 2.55:1 - 3.91:1. All fills now come from
      the --ha3-action / --ha3-danger / --ha3-success-fill / --ha3-info-fill
      tokens, which clear WCAG AA.
   --------------------------------------------------------------------------- */

/* Primary action. */
body.ha-premium-ready .btn-primary,
body.ha-premium-ready .btn-success.btn-block,
.btn-primary,
.ha-v3-primary-action,
.ha-v3-page-action,
.ha-v6-status-filter.is-active,
#order-standard_cart .products .product .btn-success,
#order-standard_cart .btn-success {
    color: #fff;
    background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2));
    border-color: transparent;
}

body.ha-premium-ready .btn-primary:hover,
body.ha-premium-ready .btn-primary:focus,
body.ha-premium-ready .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.ha-v3-primary-action:hover,
.ha-v3-primary-action:focus,
.ha-v3-primary-action:active,
.ha-v3-page-action:hover,
.ha-v3-page-action:focus,
.ha-v3-page-action:active,
.ha-v6-status-filter.is-active:hover,
.ha-v6-status-filter.is-active:focus,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-success:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--ha3-action-hover), var(--ha3-action-hover-2));
    border-color: transparent;
}

/*
 * The dashboard hero's primary button used the brand red gradient at 2.49:1
 * with white text. It also now carries "Pay now" when an invoice is due, which
 * is a primary action, not a destructive one.
 */
.ha-hero-primary,
body.ha-premium-ready .ha-hero-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ha3-action) 30%, transparent);
}

.ha-hero-primary:hover,
.ha-hero-primary:focus,
body.ha-premium-ready .ha-hero-primary:hover,
body.ha-premium-ready .ha-hero-primary:focus {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ha3-action-hover), var(--ha3-action-hover-2));
}

/* Destructive action. */
.btn-danger,
.ha-v3-danger-action {
    color: #fff;
    background: linear-gradient(135deg, var(--ha3-danger), var(--ha3-danger-2));
    border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.ha-v3-danger-action:hover,
.ha-v3-danger-action:focus,
.ha-v3-danger-action:active {
    color: #fff;
    background: linear-gradient(135deg, var(--ha3-danger-hover), var(--ha3-danger-hover-2));
    border-color: transparent;
}

/* Confirmation and informational fills. */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--ha3-success-fill);
    border-color: transparent;
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--ha3-info-fill);
    border-color: transparent;
}

/*
 * Neutral buttons keep the surface fill, so only the label needs pinning
 * against the Bootstrap hover colour.
 */
/*
 * .ha-v4-service-action is deliberately absent: it declares its own light
 * label with !important because it only ever renders on the dark service
 * summary panel, so the Bootstrap hover colour cannot reach it.
 */
.ha-v3-power-button,
.ha-v3-power-button:hover,
.ha-v3-power-button:focus,
.ha-v3-power-button:active,
.ha-v6-status-filter,
.ha-v6-status-filter:hover,
.ha-v6-status-filter:focus {
    color: var(--ha3-ink);
}

.ha-v3-power-button:hover,
.ha-v3-power-button:focus {
    background: var(--ha3-surface-soft);
    border-color: color-mix(in srgb, var(--ha3-ink) 22%, var(--ha3-line));
}

/* The status-filter active rule above re-declares the label; keep it white. */
.ha-v6-status-filter.is-active,
.ha-v6-status-filter.is-active:hover,
.ha-v6-status-filter.is-active:focus {
    color: #fff;
}

/* Disabled controls must still read as text, just clearly inert. */
.btn:disabled,
.btn.disabled,
.ha-v3-primary-action:disabled,
.ha-v3-danger-action:disabled,
.ha-v3-power-button:disabled {
    color: #fff;
    opacity: .62;
    cursor: not-allowed;
}

.ha-v3-power-button:disabled {
    color: var(--ha3-muted);
}

/* ---------------------------------------------------------------------------
   Brand surfaces that carry white text
   --------------------------------------------------------------------------- */

/*
 * Primary buttons are handled by the action-button layer above; the brand red
 * now only appears where it reads as an accent rather than as a call to action.
 * premium-v2.css owns .btn-primary at `body.ha-premium-ready` specificity, which
 * is why the layer above matches that.
 */
.page-item.active .page-link,
.header .cart-btn .badge {
    background: var(--ha3-brand-fill);
    border-color: var(--ha3-brand-fill);
}

/* Bootstrap's default #e9ecef breadcrumb fill left the link at 4.04:1. */
.breadcrumb-item a {
    color: var(--ha3-copy);
}

/* ---------------------------------------------------------------------------
   Contrast corrections for the inherited layers

   custom.css is linked by twenty-one's head.tpl with no cache-busting query, and
   premium-v2.css predates the token system, so their sub-AA greys are corrected
   here instead: premium-v3.css loads last and is versioned, so these always take
   effect immediately after a release.

   Ratios below are measured against the surface each element actually sits on.
   --------------------------------------------------------------------------- */

/*
 * premium-v2.css reads its brand blue and emerald straight onto light cards:
 *   .ha-top-quick-footer  --ha2-blue     3.54:1
 *   .ha-credit-action     --ha2-emerald  2.58:1
 * Both keep their decorative role elsewhere; only the text is repointed at the
 * readable variants, which invert correctly with the scheme.
 */
.ha-top-quick-footer,
.ha-top-quick-footer span,
.ha-top-email-icon,
body.ha-premium-ready .card-header .card-title > i {
    color: var(--ha3-blue-text);
}

.ha-credit-action,
body.ha-dashboard .tiles .ha-credit-action {
    color: var(--ha3-green-text);
}

/* Header dropdowns render on a white card: 2.27:1 - 3.03:1 before. */
.ha-top-email-item,
.ha-top-email-copy small,
.ha-top-email-empty,
.ha-top-email-empty i,
.ha-top-account-copy small,
.ha-top-account-chevron,
.ha-top-menu-heading small,
.ha-top-quick-heading small {
    color: var(--ha3-muted);
}

/* #738097 on the #f7f9fc header fill measured 3.78:1; --ha3-muted gives 4.65:1. */
body.ha-premium-ready .table thead th {
    color: var(--ha3-muted);
}

/* #a4adbc measured 2.26:1 on white. */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ha3-muted);
    opacity: 1;
}

/* Breadcrumb separator glyph measured 1.89:1. */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ha3-muted);
}

/* ---------------------------------------------------------------------------
   HostAccent guides

   Shared presentation for the three places the blog's article index surfaces:
   the command palette, the ticket composer and the service detail page.
   Everything is built from the existing tokens so both schemes are covered.
   --------------------------------------------------------------------------- */

.ha-v8-guide-panel {
    margin: 18px 0 0;
    padding: 18px 20px 14px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v8-guide-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.ha-v8-guide-head > div { flex: 1; min-width: 0; }

.ha-v8-guide-head strong {
    display: block;
    color: var(--ha3-ink);
    font-size: var(--ha-type-card-title, 15px);
    font-weight: 780;
    letter-spacing: -.01em;
}

.ha-v8-guide-head small {
    display: block;
    margin-top: 2px;
    color: var(--ha3-muted);
    font-size: var(--ha-type-small, 12px);
    line-height: 1.45;
}

.ha-v8-guide-badge {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--ha3-action);
    background: color-mix(in srgb, var(--ha3-action) 10%, transparent);
    border-radius: 12px;
    font-size: 15px;
}

.ha-v8-guide-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ha3-action);
    font-size: var(--ha-type-label, 12px);
    font-weight: 730;
    text-decoration: none;
    white-space: nowrap;
}

.ha-v8-guide-all:hover,
.ha-v8-guide-all:focus { color: var(--ha3-action-hover); text-decoration: underline; }

.ha-v8-guide-list { display: grid; gap: 7px; }

.ha-v8-guide-row {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    gap: 11px;
    color: inherit;
    background: var(--ha3-surface-soft);
    border: 1px solid transparent;
    border-radius: 13px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.ha-v8-guide-row:hover,
.ha-v8-guide-row:focus {
    background: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--ha3-action) 30%, var(--ha3-line));
    transform: translateY(-1px);
    text-decoration: none;
}

.ha-v8-guide-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: var(--ha3-action);
    background: color-mix(in srgb, var(--ha3-action) 9%, transparent);
    border-radius: 9px;
    font-size: 12px;
}

.ha-v8-guide-copy { flex: 1; min-width: 0; }

.ha-v8-guide-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ha3-ink);
    font-size: var(--ha-type-ui, 14px);
    font-weight: 720;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-v8-guide-copy small {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: var(--ha3-muted);
    font-size: var(--ha-type-small, 12px);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ha-v8-guide-out {
    flex: 0 0 auto;
    color: var(--ha3-muted);
    font-size: 11px;
}

.ha-v8-guide-row:hover .ha-v8-guide-out,
.ha-v8-guide-row:focus .ha-v8-guide-out { color: var(--ha3-action); }

/* Ticket composer: sits between the native fields, so it needs to read as part
   of the form rather than as a floating card. */
.ha-v8-ticket-compose #haTicketGuides {
    margin: 16px 0 20px;
    background: color-mix(in srgb, var(--ha3-action) 4%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-action) 20%, var(--ha3-line));
}

/* Command palette: rows are flush with the existing result list. */
.ha-v8-command-guides { padding-top: 4px; border-top: 1px solid var(--ha3-line); }
.ha-v8-command-guides .ha-v8-guide-row { background: transparent; border-radius: 11px; }
.ha-v8-command-guides .ha-v8-guide-row:hover,
.ha-v8-command-guides .ha-v8-guide-row:focus { background: var(--ha3-surface-soft); transform: none; }

.ha-v8-guide-host:empty { display: none; }

@media (max-width: 575.98px) {
    .ha-v8-guide-panel { padding: 15px 14px 12px; }
    .ha-v8-guide-all { display: none; }
    .ha-v8-guide-copy small { -webkit-line-clamp: 3; }
}

/* ---------------------------------------------------------------------------
   WHMCS powered-by branding

   WHMCS emits this immediately after the page content, outside .footer:
     <p style="text-align:center;">Powered by <a href="https://www.whmcs.com/">…</a></p>

   Matching the link target rather than the words "Powered by" is exact: a
   client's ticket reply or a knowledgebase article can contain that phrase, but
   not inside a paragraph linking to whmcs.com. Hiding it in CSS means it never
   paints, so there is no flash before the script runs.

   Only enable this where the WHMCS licence permits removing the branding.
   --------------------------------------------------------------------------- */

p:has(> a[href*="whmcs.com"]) {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Dashboard tile icon hover

   The tile already lifts on hover; the icon now answers with it. Each tile
   carries its own --tile-color / --tile-soft pair, so the effect picks up the
   right hue per tile without naming any of them. The !important on background
   is required to beat premium-v2.css, which sets the resting fill that way.
   --------------------------------------------------------------------------- */

body.ha-dashboard .tiles .tile > i {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1),
                background .18s ease,
                border-color .18s ease,
                box-shadow .18s ease;
    will-change: transform;
}

body.ha-dashboard .tiles .tile:hover > i,
body.ha-dashboard .tiles .tile:focus-visible > i {
    transform: scale(1.18);
    background: color-mix(in srgb, var(--tile-color) 19%, transparent) !important;
    border-color: color-mix(in srgb, var(--tile-color) 36%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tile-color) 27%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .8);
}

/*
 * On the dark canvas the resting inset highlight reads as a white seam and the
 * hover glow needs more of the tile colour to register at all.
 */
html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile > i {
    box-shadow: none;
}

html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile:hover > i,
html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile:focus-visible > i {
    background: color-mix(in srgb, var(--tile-color) 26%, transparent) !important;
    border-color: color-mix(in srgb, var(--tile-color) 46%, transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--tile-color) 34%, transparent);
}

/*
 * Reduce-motion users keep the colour response and lose only the movement.
 * custom.css already collapses transition-duration globally for them, so
 * without this the icon would jump to the larger size instantly.
 */
@media (prefers-reduced-motion: reduce) {
    body.ha-dashboard .tiles .tile:hover > i,
    body.ha-dashboard .tiles .tile:focus-visible > i {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Home card header buttons

   WHMCS puts an optional action in each home-panel header as
   `btn btn-default bg-color-{panel colour}`. custom.css gives bg-color-* a
   background but never a text colour, and panels whose colour is not in that
   short list get no background at all — which is why the Recent News action
   rendered as white on white and could not be seen.
   --------------------------------------------------------------------------- */

body.ha-premium-ready .client-home-cards .card-header .btn,
body.ha-premium-ready .card-header .float-right .btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    gap: 7px;
    /* --ha3-action is the solid fill, which is the same in both schemes because
       it always carries white text. As a *text* colour it needs the readable
       variant, which lightens for the dark canvas. */
    color: var(--ha3-blue-text) !important;
    background: color-mix(in srgb, var(--ha3-blue-text) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ha3-blue-text) 26%, transparent) !important;
    border-radius: 10px;
    font-size: var(--ha-type-label, 12px);
    font-weight: 730;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.ha-premium-ready .client-home-cards .card-header .btn:hover,
body.ha-premium-ready .client-home-cards .card-header .btn:focus,
body.ha-premium-ready .card-header .float-right .btn:hover,
body.ha-premium-ready .card-header .float-right .btn:focus {
    color: #fff !important;
    background: var(--ha3-action) !important;
    border-color: var(--ha3-action) !important;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Row action on the services list
   --------------------------------------------------------------------------- */

.ha-v8-row-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ha-v8-row-action {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    gap: 7px;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue-text) 11%, transparent);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: var(--ha-type-label, 12px);
    font-weight: 720;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.ha-v8-row-action i { font-size: 10px; }

.ha-v8-row-action:hover,
.ha-v8-row-action:focus {
    color: #fff;
    background: var(--ha3-action);
    border-color: var(--ha3-action);
    transform: translateX(1px);
    text-decoration: none;
}

tr:hover .ha-v8-row-action {
    border-color: color-mix(in srgb, var(--ha3-blue-text) 30%, transparent);
}

/* The announcements list keeps custom.css' light link colour on the dark card. */
html[data-ha-theme="dark"] body.ha-premium-ready .client-home-cards .list-group-item,
html[data-ha-theme="dark"] body.ha-premium-ready .client-home-cards .list-group-item-action {
    color: var(--ha3-copy);
    background-color: transparent;
    border-color: var(--ha3-line);
}

html[data-ha-theme="dark"] body.ha-premium-ready .client-home-cards .list-group-item-action:hover {
    color: var(--ha3-ink);
    background-color: var(--ha3-surface-soft);
}

@media (max-width: 767.98px) {
    .ha-v8-row-state { justify-content: flex-start; }
    .ha-v8-row-action span { display: none; }
    .ha-v8-row-action { padding: 0 9px; }
}

/* ---------------------------------------------------------------------------
   Order catalogue dialog
   --------------------------------------------------------------------------- */

.ha-v9-order-layer {
    position: fixed;
    z-index: 13500;
    inset: 0;
    display: grid;
    padding: 5vh 18px;
    place-items: start center;
    overflow-y: auto;
}

.ha-v9-order-layer[hidden] { display: none; }
body.ha-v9-order-open { overflow: hidden; }

.ha-v9-order-backdrop {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(6, 14, 27, .62);
    backdrop-filter: blur(7px);
    border: 0;
    cursor: pointer;
    animation: haOrderFade .2s ease;
}

.ha-v9-order {
    position: relative;
    display: flex;
    width: min(100%, 1180px);
    max-height: 90vh;
    flex-direction: column;
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-lg);
    animation: haOrderRise .26s cubic-bezier(.2, .8, .2, 1);
}

/* Full screen: the dialog takes the viewport and only its body scrolls. */
/*
 * grid-template-columns is needed as well as place-items. The layer's implicit
 * column is auto-sized, so it takes its width from the dialog's own
 * `min(100%, 1180px)` — and the dialog's `width: 100%` then resolves against
 * that same 1180px. Naming a 1fr column breaks the circularity and lets the
 * dialog fill the viewport.
 */
.ha-v9-order-layer.is-expanded { padding: 0; place-items: stretch; grid-template-columns: 1fr; }

/*
 * width: auto, not 100%. As a grid item with justify-items: stretch the dialog
 * already fills the column; a percentage would resolve against a column the
 * dialog's own width helped size, and animating width made the measurement
 * unstable as well as thrashing layout on every toggle.
 */
.ha-v9-order-layer.is-expanded .ha-v9-order {
    width: auto;
    max-height: none;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
}

.ha-v9-order-layer.is-expanded .ha-v9-order-body { padding-right: max(28px, 6vw); padding-left: max(28px, 6vw); }
.ha-v9-order-layer.is-expanded .ha-v9-order-head { padding-right: max(28px, 6vw); padding-left: max(28px, 6vw); }
.ha-v9-order-layer.is-expanded .ha-v9-order-grid { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }

@keyframes haOrderFade { from { opacity: 0; } }
@keyframes haOrderRise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.ha-v9-order-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 26px 28px 20px;
    gap: 16px;
    background:
        radial-gradient(circle at 88% -40%, color-mix(in srgb, var(--ha3-action) 16%, transparent), transparent 60%),
        var(--ha3-surface-soft);
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v9-order-head > div { flex: 1; min-width: 0; }

.ha-v9-order-head span {
    display: block;
    color: var(--ha3-blue-text);
    font-size: var(--ha-type-label, 12px);
    font-weight: 780;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ha-v9-order-head h2 {
    margin: 7px 0 5px;
    color: var(--ha3-ink);
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 820;
    letter-spacing: -.03em;
}

.ha-v9-order-head p {
    margin: 0;
    color: var(--ha3-muted);
    font-size: var(--ha-type-ui, 14px);
}

.ha-v9-order-tools {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

.ha-v9-order-expand,
.ha-v9-order-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 12px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.ha-v9-order-expand:hover,
.ha-v9-order-expand:focus {
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue-text) 10%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-blue-text) 32%, var(--ha3-line));
}

/* Closing is the one destructive action here, so it answers in red. */
.ha-v9-order-close:hover,
.ha-v9-order-close:focus {
    color: #fff;
    background: var(--ha3-danger);
    border-color: var(--ha3-danger);
    transform: rotate(90deg);
}

.ha-v9-order-body {
    flex: 1 1 auto;
    padding: 24px 28px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ha-v9-order-group { margin-bottom: 22px; }

.ha-v9-order-group header { margin-bottom: 11px; }

.ha-v9-order-group h3 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: var(--ha-type-card-title, 15px);
    font-weight: 780;
}

.ha-v9-order-group header small {
    display: block;
    margin-top: 2px;
    color: var(--ha3-muted);
    font-size: var(--ha-type-small, 12px);
}

.ha-v9-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 11px;
}

.ha-v9-order-card {
    --order-tone: var(--ha3-blue-text);
    display: flex;
    align-items: center;
    padding: 15px 16px;
    gap: 14px;
    color: inherit;
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 15px;
    text-decoration: none;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ha-v9-order-card.tone-cyan { --order-tone: var(--ha3-cyan-text); }
.ha-v9-order-card.tone-green { --order-tone: var(--ha3-green-text); }
.ha-v9-order-card.tone-amber { --order-tone: var(--ha3-amber-text); }
.ha-v9-order-card.tone-violet { --order-tone: var(--ha3-violet); }

.ha-v9-order-card:hover,
.ha-v9-order-card:focus {
    background: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--order-tone) 34%, var(--ha3-line));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--order-tone) 18%, transparent);
    transform: translateY(-3px);
    text-decoration: none;
}

.ha-v9-order-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    color: var(--order-tone);
    background: color-mix(in srgb, var(--order-tone) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--order-tone) 18%, transparent);
    border-radius: 16px;
    font-size: 20px;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .18s ease;
}

.ha-v9-order-card:hover .ha-v9-order-icon,
.ha-v9-order-card:focus .ha-v9-order-icon {
    background: color-mix(in srgb, var(--order-tone) 20%, transparent);
    transform: scale(1.1);
}

.ha-v9-order-copy { flex: 1; min-width: 0; }

.ha-v9-order-copy strong {
    display: block;
    color: var(--ha3-ink);
    font-size: var(--ha-type-ui, 14px);
    font-weight: 760;
}

.ha-v9-order-copy small {
    display: block;
    margin-top: 2px;
    color: var(--ha3-muted);
    font-size: var(--ha-type-small, 12px);
    line-height: 1.45;
}

.ha-v9-order-go { color: var(--ha3-muted); font-size: 12px; }
.ha-v9-order-card:hover .ha-v9-order-go { color: var(--order-tone); }

@media (max-width: 575.98px) {
    .ha-v9-order-layer { padding: 0; place-items: stretch; grid-template-columns: 1fr; }
    .ha-v9-order { width: auto; max-height: none; min-height: 100vh; border-radius: 0; border: 0; }
    .ha-v9-order-head { padding: 20px 18px 16px; }
    .ha-v9-order-body { padding: 18px 18px 22px; }
    .ha-v9-order-grid { grid-template-columns: 1fr; }
    /* The dialog already fills the screen here. */
    .ha-v9-order-expand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ha-v9-order,
    .ha-v9-order-backdrop { animation: none; transition: none; }
    .ha-v9-order-close:hover,
    .ha-v9-order-close:focus { transform: none; }
    .ha-v9-order-card:hover,
    .ha-v9-order-card:focus { transform: none; }
    .ha-v9-order-card:hover .ha-v9-order-icon,
    .ha-v9-order-card:focus .ha-v9-order-icon { transform: none; }
}

/* ---------------------------------------------------------------------------
   Addons

   Two surfaces show addons and both were left as stock WHMCS markup:

   1. cart.php?gid=addons — the order page, rendered by the standard_cart order
      form. (standard_cart is the active form: the theme already carries 34
      rules for #order-standard_cart and none for any other order form.)
   2. Service details → Addons tab — the client's existing addons.
   --------------------------------------------------------------------------- */

/* --- 1. Order page ------------------------------------------------------- */

/*
 * standard_cart's own style.css lays these cards out with floats — description
 * float:left at 60%, footer float:right at 40% with centred text — and paints a
 * grey header band. Partially overriding that fought it, so the layout is taken
 * over outright here: floats cleared, widths released, alignment reset, then
 * rebuilt as a grid of cards.
 */

#order-standard_cart .header-lined h1.font-size-36 {
    margin: 0 0 6px;
    color: var(--ha3-ink);
    font-size: var(--ha-type-section, 26px);
    font-weight: 820;
    letter-spacing: -.025em;
}

#order-standard_cart .products { margin: 18px 0 0 !important; }

#order-standard_cart .products > .row {
    display: grid;
    margin: 0;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

#order-standard_cart .products > .row > [class*="col-"] {
    max-width: 100%;
    display: flex;
    flex: 1 1 auto;
    padding: 0;
}

#order-standard_cart .products .product {
    position: relative;
    width: 100%;
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column;
    overflow: hidden;
    background: var(--ha3-surface-solid) !important;
    border: 1px solid var(--ha3-line) !important;
    border-radius: var(--ha3-radius-lg) !important;
    box-shadow: var(--ha3-shadow-xs);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* A soft accent bloom behind the title, and a hairline rule under it. */
#order-standard_cart .products .product::before {
    position: absolute;
    top: -70px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in srgb, var(--ha3-action) 22%, transparent), transparent 68%);
    content: "";
    pointer-events: none;
}

#order-standard_cart .products .product:hover {
    border-color: color-mix(in srgb, var(--ha3-action) 34%, var(--ha3-line)) !important;
    box-shadow: var(--ha3-shadow-sm);
    transform: translateY(-3px);
}

/*
 * The form carries Bootstrap's .form-inline, which sets
 * `flex-flow: row wrap; align-items: center`. Left alone, every child shrank to
 * its content and centred itself — which is why short descriptions and the
 * price row appeared floating in the middle of the card.
 */
#order-standard_cart .products .product > form {
    position: relative;
    display: flex !important;
    width: 100%;
    height: 100%;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
}

/*
 * The template marks the title and footer as .col-12, which Bootstrap gives
 * `flex: 0 0 100%`. In a column flex container that basis applies to the main
 * axis — height — so each one tried to fill the whole card and they stacked on
 * top of each other. Reset the basis and let the description take the slack.
 */
#order-standard_cart .products .product > form > header,
#order-standard_cart .products .product > form > footer,
#order-standard_cart .products .product > form > .clearfix {
    max-width: none !important;
    flex: 0 0 auto !important;
}

#order-standard_cart .products .product > form > .product-desc {
    flex: 1 1 auto;
}

#order-standard_cart .products .product > form > .clearfix { display: none; }

/* Title */
#order-standard_cart .products .product > form > header {
    margin: 0 !important;
    padding: 22px 24px 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
}

#order-standard_cart .products .product > form > header span {
    display: block;
    margin: 0 !important;
    color: var(--ha3-ink) !important;
    font-size: var(--ha-type-card-title, 17px) !important;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.3;
}

/* Description and service selector */
#order-standard_cart .products .product .product-desc,
#order-standard_cart .products .product div.product-desc {
    width: auto !important;
    float: none !important;
    padding: 12px 24px 0 !important;
    font-size: inherit !important;
    text-align: left !important;
}

#order-standard_cart .products .product .product-desc p {
    display: -webkit-box;
    margin: 0 0 16px;
    overflow: hidden;
    color: var(--ha3-copy);
    font-size: var(--ha-type-small, 13px);
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

#order-standard_cart .products .product .product-desc .form-group { margin: 0; }

#order-standard_cart .products .product select.field {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 12px;
    font-size: var(--ha-type-ui, 14px);
    font-weight: 600;
}

#order-standard_cart .products .product select.field:focus {
    border-color: color-mix(in srgb, var(--ha3-action) 45%, var(--ha3-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ha3-action) 12%, transparent);
}

/* Price and action */
#order-standard_cart .products .product > form > footer {
    width: auto !important;
    display: flex;
    margin: 20px 0 0 !important;
    margin-top: auto !important;
    padding: 16px 24px !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    float: none !important;
    background: var(--ha3-surface-soft);
    border-top: 1px solid var(--ha3-line);
    font-size: inherit !important;
    text-align: left !important;
}

#order-standard_cart .products .product .product-pricing {
    margin: 0 !important;
    color: var(--ha3-muted);
    font-size: var(--ha-type-label, 12px);
    line-height: 1.4;
}

#order-standard_cart .products .product .product-pricing .price {
    display: block;
    color: var(--ha3-ink);
    font-size: clamp(19px, 1.1vw, 22px);
    font-weight: 820;
    letter-spacing: -.02em;
}

#order-standard_cart .products .product .btn-success {
    min-height: 42px;
    padding: 0 20px;
    flex: 0 0 auto;
    border-radius: 12px;
    font-weight: 760;
    white-space: nowrap;
}

#order-standard_cart #noAddons {
    color: var(--ha3-copy);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius);
}

/* --- 2. Service details → Addons tab ------------------------------------ */

#tabAddons > h3 {
    margin: 0 0 16px;
    color: var(--ha3-ink);
    font-size: var(--ha-type-section, 22px);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* The stock markup centres each addon in a col-10 offset-1; use the full width. */
#tabAddons > .row { margin: 0; gap: 14px 0; }

#tabAddons > .row > [class*="col-"] {
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
}

#tabAddons .card {
    overflow: hidden;
    background: var(--ha3-surface-solid) !important;
    border: 1px solid var(--ha3-line) !important;
    border-radius: var(--ha3-radius-lg) !important;
    box-shadow: var(--ha3-shadow-xs);
}

#tabAddons .card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
    color: var(--ha3-ink) !important;
    background: var(--ha3-surface-soft) !important;
    border-bottom: 1px solid var(--ha3-line) !important;
    font-size: var(--ha-type-card-title, 16px);
    font-weight: 780;
}

#tabAddons .card-header .float-right {
    margin-left: auto;
    float: none !important;
}

#tabAddons .card-body { padding: 18px 20px; }

/* The stock body is a single column of loose paragraphs; make it a readable
   pair of label and value per line. */
#tabAddons .card-body > [class*="col-"] {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
}

/*
 * Each line is a single text node ("Registered: 01/02/2026"), so label and value
 * cannot be split apart in CSS. They are set as plain rows instead, with the
 * first line — the pricing — carrying the emphasis.
 */
#tabAddons .card-body p {
    margin: 0;
    padding: 10px 0;
    color: var(--ha3-copy);
    font-size: var(--ha-type-ui, 14px);
    font-weight: 600;
    border-bottom: 1px solid var(--ha3-line);
}

#tabAddons .card-body p:first-child {
    padding-top: 0;
    color: var(--ha3-ink);
    font-size: var(--ha-type-card-title, 16px);
    font-weight: 800;
    letter-spacing: -.01em;
}

#tabAddons .card-body p:last-child { border-bottom: 0; padding-bottom: 0; }

#tabAddons .card-footer {
    display: flex;
    padding: 14px 20px;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    background: var(--ha3-surface-soft) !important;
    border-top: 1px solid var(--ha3-line) !important;
}

#tabAddons .card-footer:empty { display: none; }

/* The flex footer would otherwise squeeze the management buttons and clip their
   labels. */
#tabAddons .card-footer .btn,
#tabAddons .card-footer a,
#tabAddons .card-footer button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/*
 * WHMCS' info alert links measured 4.20:1 on the alert fill. The readable accent
 * token clears AA and follows the colour scheme.
 */
#tabAddons .alert a,
#order-standard_cart .alert a {
    color: var(--ha3-blue-text);
    font-weight: 700;
    text-decoration: underline;
}

#tabAddons .alert a:hover,
#order-standard_cart .alert a:hover { color: var(--ha3-action-hover); }

/*
 * Bootstrap's alert fills are light values with no dark counterpart, so on the
 * dark canvas the alert stayed pale while its text and links switched to the
 * dark scheme. Tinting from the theme's own accents keeps both readable.
 */
html[data-ha-theme="dark"] .alert-info,
html[data-ha-theme="dark"] .alert-primary {
    color: var(--ha3-copy);
    background-color: color-mix(in srgb, var(--ha3-blue-text) 12%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-blue-text) 26%, transparent);
}

html[data-ha-theme="dark"] .alert-success {
    color: var(--ha3-copy);
    background-color: color-mix(in srgb, var(--ha3-green-text) 12%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-green-text) 26%, transparent);
}

html[data-ha-theme="dark"] .alert-warning {
    color: var(--ha3-copy);
    background-color: color-mix(in srgb, var(--ha3-amber-text) 14%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-amber-text) 28%, transparent);
}

html[data-ha-theme="dark"] .alert-danger,
html[data-ha-theme="dark"] .alert-error {
    color: var(--ha3-copy);
    background-color: color-mix(in srgb, var(--ha3-red-text) 12%, var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha3-red-text) 26%, transparent);
}

html[data-ha-theme="dark"] .alert a { color: var(--ha3-blue-text); }

@media (max-width: 575.98px) {
    #order-standard_cart .products .product > form > header { padding: 18px 18px 0 !important; }
    #order-standard_cart .products .product .product-desc { padding: 10px 18px 0 !important; }
    #order-standard_cart .products .product > form > footer {
        padding: 14px 18px !important;
        align-items: stretch;
        flex-direction: column;
    }
    #order-standard_cart .products .product .btn-success { width: 100%; justify-content: center; }
    #tabAddons .card-body p { padding: 8px 0; }
}

/* ---------------------------------------------------------------------------
   Accessibility baseline
   --------------------------------------------------------------------------- */

/*
 * Bootstrap's .btn:focus and the parent theme both clear the UA outline, and
 * this theme builds most of its controls in JavaScript, so keyboard users had
 * no visible focus indicator anywhere outside form fields. !important is
 * deliberate here: a focus ring is an accessibility guarantee, and several of
 * the rules being overridden are themselves !important.
 *
 * :focus-visible keeps the ring off pointer interactions.
 */
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ha3-focus) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}

/*
 * Text fields are deliberately excluded above.
 *
 * :focus-visible always matches a text field on a plain mouse click, because
 * the field expects keyboard input. Adding an outline there stacked a second
 * ring on top of the ring the field (or its wrapper) already draws, and on
 * fields with no radius of their own it painted a square box inside a rounded
 * control. Each field below draws exactly one ring instead.
 */
:where(input, select, textarea):focus-visible {
    outline: none;
}

.ha-v3-command-input-wrap:focus-within {
    color: var(--ha3-action);
    box-shadow: inset 0 -2px 0 var(--ha3-action);
}

/*
 * These two fields sit inside a wrapper that already draws the focus ring, and
 * custom.css puts its own `box-shadow: var(--ha-ring) !important` on every
 * focused input. Without this the control shows two concentric rings in
 * different colours. !important is required to beat that declaration.
 */
.ha-v4-cpanel-search input:focus,
.ha-v4-cpanel-search input:focus-visible,
.ha-v3-command-input:focus,
.ha-v3-command-input:focus-visible,
body.ha-v3-list-page .dataTables_filter input:focus,
body.ha-v3-list-page .dataTables_filter input:focus-visible {
    box-shadow: none !important;
}

:where(input, select, textarea).form-control:focus-visible,
:where(input, select, textarea).form-control:focus {
    border-color: color-mix(in srgb, var(--ha3-action) 45%, var(--ha3-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ha3-action) 12%, transparent);
}

/* On the dark auth/hero panels the page-level focus colour disappears. */
.ha-v3-auth-story :where(a, button, [tabindex]):focus-visible,
.ha-dashboard-hero :where(a, button, [tabindex]):focus-visible,
.ha-side-rail :where(a, button, [tabindex]):focus-visible,
.ha-v4-cpanel-launcher:focus-visible {
    outline-color: #ffffff !important;
}

/*
 * The previous reduce-motion block covered four selectors while 31 rules
 * animate. Neutralise motion globally and keep opacity fades, which do not
 * trigger vestibular symptoms.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .ha-live-dot,
    .ha-orbit-ring,
    .ha-top-status-dot {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Premium workspace system — v2.11

   These rules upgrade WHMCS's remaining account, billing, resource, status
   and checkout screens without forking their templates. The route-aware
   accent variables keep every area distinctive while the panel/form/table
   language remains consistent across the client portal.
   -------------------------------------------------------------------------- */

body.ha-v11-workspace-page {
    --ha11-accent: #2b67df;
    --ha11-accent-2: #6246d9;
    --ha11-accent-rgb: 43, 103, 223;
    --ha11-soft: rgba(43, 103, 223, .075);
}

body.ha-v11-group-billing {
    --ha11-accent: #087c64;
    --ha11-accent-2: #3858cb;
    --ha11-accent-rgb: 8, 124, 100;
    --ha11-soft: rgba(8, 124, 100, .075);
}

body.ha-v11-group-communication {
    --ha11-accent: #5360d8;
    --ha11-accent-2: #813cbb;
    --ha11-accent-rgb: 83, 96, 216;
    --ha11-soft: rgba(83, 96, 216, .075);
}

body.ha-v11-group-resources {
    --ha11-accent: #087796;
    --ha11-accent-2: #5b50d2;
    --ha11-accent-rgb: 8, 119, 150;
    --ha11-soft: rgba(8, 119, 150, .075);
}

body.ha-v11-group-operations {
    --ha11-accent: #08785d;
    --ha11-accent-2: #1671b8;
    --ha11-accent-rgb: 8, 120, 93;
    --ha11-soft: rgba(8, 120, 93, .075);
}

body.ha-v11-group-growth {
    --ha11-accent: #6842c2;
    --ha11-accent-2: #b13778;
    --ha11-accent-rgb: 104, 66, 194;
    --ha11-soft: rgba(104, 66, 194, .075);
}

body.ha-v11-group-commerce {
    --ha11-accent: #b64f10;
    --ha11-accent-2: #4c52cc;
    --ha11-accent-rgb: 182, 79, 16;
    --ha11-soft: rgba(182, 79, 16, .075);
}

body.ha-v11-workspace-page .ha-v3-page-hero {
    position: relative;
    margin-bottom: 12px;
    background:
        radial-gradient(circle at 92% 0, rgba(var(--ha11-accent-rgb), .18), transparent 34%),
        radial-gradient(circle at 4% 110%, rgba(119, 91, 247, .09), transparent 30%),
        linear-gradient(135deg, var(--ha3-surface-solid), var(--ha3-surface-soft));
    box-shadow: 0 20px 55px rgba(23, 43, 75, .085);
}

body.ha-v11-workspace-page .ha-v3-page-hero::after {
    position: absolute;
    right: 26px;
    bottom: 0;
    left: 26px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--ha11-accent), var(--ha11-accent-2), transparent 78%);
    border-radius: 999px;
    opacity: .72;
}

body.ha-v11-workspace-page .ha-v3-page-icon {
    background: linear-gradient(145deg, var(--ha11-accent), var(--ha11-accent-2));
    box-shadow: 0 14px 34px rgba(var(--ha11-accent-rgb), .24);
}

body.ha-v11-workspace-page .ha-v3-page-copy > span { color: var(--ha11-accent); }

.ha-v11-workspace {
    --ha11-panel-radius: 22px;
    min-width: 0;
}

.ha-v11-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 22px;
    padding: 8px;
    gap: 7px;
    background: color-mix(in srgb, var(--ha3-surface-solid) 92%, transparent);
    border: 1px solid var(--ha3-line);
    border-radius: 16px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v11-assurance-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    gap: 9px;
    color: var(--ha3-copy);
    background: var(--ha11-soft);
    border-radius: 11px;
    font-size: var(--ha-type-small, 13px);
    font-weight: 700;
    text-align: center;
}

.ha-v11-assurance-item i {
    color: var(--ha11-accent);
    font-size: 13px;
}

.ha-v11-panel,
.ha-v11-workspace > .panel,
.ha-v11-workspace > .well {
    overflow: hidden;
    margin-bottom: 20px;
    background:
        linear-gradient(var(--ha3-surface-solid), var(--ha3-surface-solid)) padding-box,
        linear-gradient(135deg, rgba(var(--ha11-accent-rgb), .2), var(--ha3-line), rgba(119, 91, 247, .16)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--ha11-panel-radius) !important;
    box-shadow: 0 17px 50px rgba(22, 42, 74, .075) !important;
}

.ha-v11-panel-head,
.ha-v11-panel > .panel-heading {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 16px 22px !important;
    color: var(--ha3-ink) !important;
    background: linear-gradient(110deg, var(--ha11-soft), transparent 70%) !important;
    border-bottom: 1px solid var(--ha3-line) !important;
    font-size: var(--ha-type-card-title, 17px);
    font-weight: 800;
    letter-spacing: -.015em;
}

.ha-v11-panel-body { padding: 23px !important; }

.ha-v11-panel-footer {
    padding: 15px 22px !important;
    background: var(--ha3-surface-soft) !important;
    border-top: 1px solid var(--ha3-line) !important;
}

.ha-v11-form:not(.ha-v11-form-has-panel) {
    margin-bottom: 22px;
    padding: clamp(20px, 2.15vw, 32px);
    background:
        radial-gradient(circle at 100% 0, var(--ha11-soft), transparent 24rem),
        var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha11-panel-radius);
    box-shadow: 0 18px 54px rgba(23, 43, 75, .075);
}

.ha-v11-form-has-panel { margin-bottom: 20px; }

.ha-v11-form h2,
.ha-v11-form h3,
.ha-v11-workspace > h2,
.ha-v11-workspace > h3 {
    color: var(--ha3-ink);
    font-weight: 820;
    letter-spacing: -.025em;
}

.ha-v11-field { margin-bottom: 18px; }

.ha-v11-label {
    margin-bottom: 7px;
    color: var(--ha3-ink);
    font-size: var(--ha-type-small, 13px);
    font-weight: 750;
    letter-spacing: -.005em;
}

.ha-v11-control.form-control,
.ha-v11-control.custom-select,
.ha-v11-control:not(.form-control) {
    min-height: 46px;
    padding: 10px 13px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-line) 75%, var(--ha3-muted) 25%);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(16, 31, 57, .025);
    font-size: var(--ha-type-ui, 15px);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

textarea.ha-v11-control { min-height: 128px; resize: vertical; }

.ha-v11-control:focus {
    background: var(--ha3-surface-solid);
    border-color: rgba(var(--ha11-accent-rgb), .56) !important;
    box-shadow: 0 0 0 4px rgba(var(--ha11-accent-rgb), .11) !important;
    outline: 0;
}

.ha-v11-button.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: var(--ha-type-small, 13px);
    font-weight: 760;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.ha-v11-button.btn:hover { transform: translateY(-1px); }

.ha-v11-button.btn-primary,
.ha-v11-button.btn-success {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ha11-accent), var(--ha11-accent-2)) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(var(--ha11-accent-rgb), .2);
}

.ha-v11-button.btn-default,
.ha-v11-button.btn-secondary {
    color: var(--ha3-ink) !important;
    background: var(--ha3-surface-solid) !important;
    border-color: var(--ha3-line) !important;
}

.ha-v11-table-shell,
.ha-v11-workspace > .dataTables_wrapper,
.ha-v11-workspace > .table-container {
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha11-panel-radius);
    box-shadow: 0 17px 50px rgba(22, 42, 74, .07);
}

.ha-v11-table {
    width: 100% !important;
    margin: 0 !important;
    color: var(--ha3-ink);
    background: transparent;
    border-collapse: separate !important;
    border-spacing: 0;
}

.ha-v11-table thead th {
    min-height: 54px;
    padding: 15px 18px !important;
    color: var(--ha3-muted) !important;
    background: linear-gradient(180deg, var(--ha3-surface-soft), color-mix(in srgb, var(--ha3-surface-soft) 70%, transparent));
    border-top: 0 !important;
    border-bottom: 1px solid var(--ha3-line) !important;
    font-size: var(--ha-type-label, 12px);
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.ha-v11-table tbody td {
    padding: 16px 18px !important;
    color: var(--ha3-copy);
    background: transparent;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ha3-line) !important;
    font-size: var(--ha-type-small, 13px);
    vertical-align: middle;
}

.ha-v11-table tbody tr:last-child td { border-bottom: 0 !important; }

.ha-v11-table tbody tr { transition: background .15s ease; }
.ha-v11-table tbody tr:hover { background: var(--ha11-soft); }

.ha-v11-alert {
    padding: 16px 18px;
    border-width: 1px;
    border-radius: 15px;
    box-shadow: var(--ha3-shadow-xs);
    font-size: var(--ha-type-small, 13px);
    line-height: 1.6;
}

/* Billing pages: make totals and balances feel deliberate, not like raw rows. */
body.ha-v3-add-funds .ha-v11-workspace > .row > [class*="col-"] > .card,
body.ha-v3-mass-pay .ha-v11-workspace > .row > [class*="col-"] > .card,
body.ha-v3-payment-methods .ha-v11-panel {
    height: calc(100% - 20px);
}

/* Resource/search pages receive a strong, legible discovery surface. */
body.ha-v3-knowledgebase .ha-v11-form:first-of-type,
body.ha-v3-downloads .ha-v11-form:first-of-type {
    padding: 18px;
    background: linear-gradient(135deg, var(--ha11-soft), var(--ha3-surface-solid));
}

body.ha-v3-knowledgebase .ha-v11-workspace a,
body.ha-v3-downloads .ha-v11-workspace a,
body.ha-v3-announcements .ha-v11-workspace a { color: var(--ha11-accent); }

/* Operational state stays calm and readable. */
body.ha-v3-network-status .ha-v11-table .label-success,
body.ha-v3-network-status .ha-v11-table .badge-success {
    color: #fff;
    background: var(--ha3-success-fill);
}

/* Preserve the standard-cart logic while giving its panels the portal finish. */
body.ha-v3-cart .ha-v11-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ha-v11-cart-shell {
    padding: clamp(10px, 1.2vw, 18px);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha11-panel-radius);
    box-shadow: 0 20px 60px rgba(22, 42, 74, .085);
}

.ha-v11-cart-shell .view-cart-items,
.ha-v11-cart-shell .order-summary,
.ha-v11-cart-shell .summary-container,
.ha-v11-cart-shell .sub-heading,
.ha-v11-cart-shell .domain-renewals {
    border-color: var(--ha3-line) !important;
    border-radius: 15px !important;
}

.ha-v11-cart-shell .order-summary {
    background: linear-gradient(160deg, var(--ha11-soft), var(--ha3-surface-solid)) !important;
    box-shadow: var(--ha3-shadow-xs);
}

html[data-ha-theme="dark"] body.ha-v11-workspace-page .ha-v3-page-hero,
html[data-ha-theme="dark"] .ha-v11-form:not(.ha-v11-form-has-panel) {
    box-shadow: 0 20px 58px rgba(0, 0, 0, .22);
}

html[data-ha-theme="dark"] .ha-v11-assurance {
    background: rgba(15, 28, 48, .88);
}

@media (max-width: 767.98px) {
    body.ha-v11-workspace-page .ha-v3-page-hero { margin-bottom: 10px; }

    .ha-v11-assurance {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
        padding: 6px;
    }

    .ha-v11-assurance-item {
        min-height: 38px;
        justify-content: flex-start;
        padding: 8px 11px;
        text-align: left;
    }

    .ha-v11-panel { border-radius: 17px !important; }
    .ha-v11-panel-head { min-height: 56px; padding: 14px 16px !important; }
    .ha-v11-panel-body { padding: 17px !important; }
    .ha-v11-form:not(.ha-v11-form-has-panel) { padding: 18px 15px; border-radius: 17px; }

    .ha-v11-table-shell,
    .ha-v11-workspace > .dataTables_wrapper,
    .ha-v11-workspace > .table-container {
        overflow-x: auto;
        border-radius: 17px;
        -webkit-overflow-scrolling: touch;
    }

    .ha-v11-table { min-width: 610px; }
    .ha-v11-table thead th,
    .ha-v11-table tbody td { padding-right: 13px !important; padding-left: 13px !important; }

    .ha-v11-form .btn-block,
    .ha-v11-form .form-actions .btn,
    body.ha-v3-contact .ha-v11-form .btn { width: 100%; }

    .ha-v11-cart-shell { padding: 8px; border-radius: 17px; }
}

/* Domain WHOIS contact form: make Cancel a clear navigation action. */
.ha-v11-domain-contact-cancel {
    align-items: center;
    gap: 8px;
    color: var(--ha3-ink) !important;
    background: var(--ha3-surface-solid) !important;
    border: 1px solid var(--ha3-line) !important;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v11-domain-contact-cancel:hover,
.ha-v11-domain-contact-cancel:focus {
    color: var(--ha3-action) !important;
    border-color: color-mix(in srgb, var(--ha3-action) 35%, var(--ha3-line)) !important;
    box-shadow: 0 9px 24px rgba(31, 95, 208, .12);
}

/* --------------------------------------------------------------------------
   Email step-up verification for EPP/Auth-code disclosure
   -------------------------------------------------------------------------- */

body.ha-v12-epp-page .ha-v3-page-hero {
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 94% 0, rgba(197, 123, 37, .16), transparent 31%),
        radial-gradient(circle at 4% 110%, rgba(31, 95, 208, .09), transparent 30%),
        linear-gradient(135deg, var(--ha3-surface-solid), var(--ha3-surface-soft));
}

body.ha-v12-epp-page .ha-v3-page-icon {
    background: linear-gradient(145deg, #9b5a16, #6e3d82);
    box-shadow: 0 14px 34px rgba(128, 74, 28, .24);
}

.ha-v12-epp-gate {
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
    margin-bottom: 24px;
    overflow: hidden;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(19, 38, 70, .13);
}

.ha-v12-epp-visual {
    position: relative;
    min-height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(78, 123, 230, .22), transparent 17rem),
        radial-gradient(circle at 0 100%, rgba(193, 120, 35, .19), transparent 18rem),
        linear-gradient(145deg, #091a33, #182c53 52%, #28254f);
}

.ha-v12-epp-visual::before,
.ha-v12-epp-visual::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.ha-v12-epp-visual::before { width: 360px; height: 360px; }
.ha-v12-epp-visual::after { width: 470px; height: 470px; }

.ha-v12-epp-lock {
    position: relative;
    z-index: 3;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3478eb, #6d4ce1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 37px;
}

.ha-v12-epp-ring {
    position: absolute;
    z-index: 2;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(121, 164, 255, .3);
    border-radius: 50%;
    animation: haEppPulse 3s ease-out infinite;
}

.ha-v12-epp-ring.is-two { animation-delay: 1.5s; }

.ha-v12-epp-key {
    position: absolute;
    right: 18%;
    bottom: 22%;
    z-index: 3;
    display: grid;
    width: 49px;
    height: 49px;
    place-items: center;
    color: #f4c677;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
    transform: rotate(-11deg);
}

@keyframes haEppPulse {
    0% { opacity: .8; transform: scale(.65); }
    100% { opacity: 0; transform: scale(1.35); }
}

.ha-v12-epp-content {
    align-self: center;
    padding: clamp(32px, 4vw, 58px);
}

.ha-v12-epp-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 13px;
    gap: 8px;
    color: var(--ha3-blue-text);
    font-size: var(--ha-type-label, 12px);
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ha-v12-epp-content h2 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.ha-v12-epp-lead {
    max-width: 650px;
    margin: 15px 0 21px;
    color: var(--ha3-copy);
    font-size: var(--ha-type-ui, 15px);
    line-height: 1.65;
}

.ha-v12-epp-lead strong { color: var(--ha3-ink); font-weight: 800; }

.ha-v12-epp-notice {
    min-height: 52px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 14px 16px;
    gap: 11px;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .075);
    border: 1px solid rgba(54, 127, 245, .18);
    border-radius: 14px;
    font-size: var(--ha-type-small, 13px);
    font-weight: 660;
    line-height: 1.55;
}

.ha-v12-epp-notice > i { margin-top: 3px; }

.ha-v12-epp-notice.status-invalid,
.ha-v12-epp-notice.status-expired,
.ha-v12-epp-notice.status-locked,
.ha-v12-epp-notice.status-rate-limited,
.ha-v12-epp-notice.status-error,
.ha-v12-epp-notice.status-mail-error,
.ha-v12-epp-notice.status-csrf-error {
    color: var(--ha3-red-text);
    background: color-mix(in srgb, var(--ha3-red) 9%, transparent);
    border-color: color-mix(in srgb, var(--ha3-red) 24%, transparent);
}

.ha-v12-epp-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--ha3-ink);
    font-size: var(--ha-type-small, 13px);
    font-weight: 780;
}

.ha-v12-epp-input-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 10px;
}

.ha-v12-epp-input-row input {
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-line) 55%, var(--ha3-muted) 45%);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(15, 29, 52, .025);
    font-size: 22px;
    font-weight: 820;
    letter-spacing: .36em;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ha-v12-epp-input-row input:focus {
    border-color: rgba(31, 95, 208, .58);
    box-shadow: 0 0 0 4px rgba(31, 95, 208, .11);
    outline: 0;
}

.ha-v12-epp-input-row input[aria-invalid="true"] { border-color: var(--ha3-red-text); }

.ha-v12-epp-verify,
.ha-v12-epp-copy {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    gap: 9px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2)) !important;
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 13px 30px rgba(31, 95, 208, .21);
    font-size: var(--ha-type-small, 13px);
    font-weight: 790;
}

.ha-v12-epp-verify:disabled {
    opacity: .52;
    box-shadow: none;
    cursor: not-allowed;
}

.ha-v12-epp-hint {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
    color: var(--ha3-muted);
    font-size: var(--ha-type-label, 12px);
}

.ha-v12-epp-expiry { color: var(--ha3-blue-text); font-weight: 720; }

.ha-v12-epp-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    gap: 8px;
}

.ha-v12-epp-resend-form { margin: 0; }

.ha-v12-epp-resend,
.ha-v12-epp-domain-back,
.ha-v12-epp-back {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 8px;
    color: var(--ha3-ink) !important;
    background: var(--ha3-surface-soft) !important;
    border: 1px solid var(--ha3-line) !important;
    border-radius: 12px;
    font-size: var(--ha-type-small, 13px);
    font-weight: 730;
    text-decoration: none !important;
}

.ha-v12-epp-resend:disabled { opacity: .58; cursor: not-allowed; }

.ha-v12-epp-trust {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    gap: 8px 18px;
    color: var(--ha3-muted);
    border-top: 1px solid var(--ha3-line);
    font-size: var(--ha-type-label, 12px);
    font-weight: 680;
}

.ha-v12-epp-trust span { display: inline-flex; align-items: center; gap: 6px; }
.ha-v12-epp-trust i { color: var(--ha3-green-text); }

.ha-v12-epp-result {
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--ha3-surface-solid) !important;
    border: 1px solid color-mix(in srgb, var(--ha3-green) 26%, var(--ha3-line)) !important;
    border-radius: 24px !important;
    box-shadow: 0 23px 70px rgba(15, 56, 48, .1) !important;
}

.ha-v12-epp-result > .card-body { padding: clamp(24px, 3.2vw, 42px) !important; }

.ha-v12-epp-success {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 22px;
    gap: 16px;
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v12-epp-success-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #0f7d5b, #0f6d88);
    border-radius: 18px;
    box-shadow: 0 13px 29px rgba(15, 125, 91, .21);
    font-size: 20px;
}

.ha-v12-epp-success small {
    display: block;
    margin-bottom: 2px;
    color: var(--ha3-green-text);
    font-size: var(--ha-type-label, 12px);
    font-weight: 830;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ha-v12-epp-success h2 { margin: 0; color: var(--ha3-ink); font-size: clamp(22px, 2.2vw, 30px); font-weight: 840; letter-spacing: -.035em; }
.ha-v12-epp-success p { margin: 5px 0 0; color: var(--ha3-copy); font-size: var(--ha-type-small, 13px); }

.ha-v12-epp-session {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    gap: 6px;
    color: var(--ha3-green-text);
    background: color-mix(in srgb, var(--ha3-green) 10%, transparent);
    border-radius: 999px;
    font-size: var(--ha-type-label, 12px);
    font-weight: 750;
    white-space: nowrap;
}

.ha-v12-epp-native-result {
    padding: 18px 20px !important;
    color: var(--ha3-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ha3-green) 9%, transparent), var(--ha3-surface-soft)) !important;
    border: 1px solid color-mix(in srgb, var(--ha3-green) 22%, var(--ha3-line)) !important;
    border-radius: 15px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--ha-type-ui, 15px);
    line-height: 1.6;
    word-break: break-word;
}

.ha-v12-epp-result-actions { display: flex; flex-wrap: wrap; margin-top: 14px; gap: 9px; }
.ha-v12-epp-copy { min-height: 44px; }

html[data-ha-theme="dark"] .ha-v12-epp-gate,
html[data-ha-theme="dark"] .ha-v12-epp-result { box-shadow: 0 28px 82px rgba(0, 0, 0, .3) !important; }

@media (max-width: 991.98px) {
    .ha-v12-epp-gate { grid-template-columns: 1fr; }
    .ha-v12-epp-visual { min-height: 210px; }
    .ha-v12-epp-lock { width: 82px; height: 82px; border-radius: 25px; font-size: 28px; }
    .ha-v12-epp-visual::before { width: 230px; height: 230px; }
    .ha-v12-epp-visual::after { width: 330px; height: 330px; }
    .ha-v12-epp-key { right: 27%; bottom: 18%; }
}

@media (max-width: 575.98px) {
    .ha-v12-epp-gate { min-height: 0; border-radius: 19px; }
    .ha-v12-epp-visual { min-height: 170px; }
    .ha-v12-epp-content { padding: 25px 17px; }
    .ha-v12-epp-content h2 { font-size: 29px; }
    .ha-v12-epp-input-row { grid-template-columns: 1fr; }
    .ha-v12-epp-input-row input,
    .ha-v12-epp-verify { width: 100%; }
    .ha-v12-epp-hint { align-items: flex-start; flex-direction: column; gap: 2px; }
    .ha-v12-epp-secondary-actions,
    .ha-v12-epp-secondary-actions form,
    .ha-v12-epp-resend,
    .ha-v12-epp-domain-back { width: 100%; }
    .ha-v12-epp-trust { flex-direction: column; }
    .ha-v12-epp-success { grid-template-columns: 50px minmax(0, 1fr); }
    .ha-v12-epp-success-icon { width: 50px; height: 50px; border-radius: 15px; }
    .ha-v12-epp-session { grid-column: 1 / -1; justify-self: start; }
    .ha-v12-epp-result-actions,
    .ha-v12-epp-result-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ha-v12-epp-ring { animation: none; }
}

/* In-context EPP verification dialog. The native protected page remains the
   no-JavaScript and recovery path, while routine access stays in the domain
   workspace with a focused, accessible step-up flow. */
body.ha-v12-epp-modal-open { overflow: hidden !important; }

.ha-v12-epp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    padding: 24px;
    place-items: center;
    overflow: auto;
    opacity: 0;
    background: rgba(4, 12, 27, .68);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
    transition: opacity .18s ease;
}

.ha-v12-epp-modal-overlay.is-open { opacity: 1; }
.ha-v12-epp-modal-overlay.is-closing { opacity: 0; }

.ha-v12-epp-modal {
    width: min(760px, 100%);
    max-height: min(780px, calc(100vh - 48px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    color: var(--ha3-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(109, 76, 225, .08), transparent 34%),
        var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-line) 75%, rgba(130, 164, 235, .35));
    border-radius: 25px;
    box-shadow: 0 38px 110px rgba(0, 9, 28, .36), 0 0 0 1px rgba(255, 255, 255, .05);
    transform: translateY(16px) scale(.985);
    transition: transform .2s cubic-bezier(.2, .75, .25, 1);
}

.ha-v12-epp-modal-overlay.is-open .ha-v12-epp-modal { transform: translateY(0) scale(1); }

.ha-v12-epp-modal-head {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    padding: 21px 23px;
    gap: 14px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 72%, transparent);
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v12-epp-modal-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2f73e8, #704cdd);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    box-shadow: 0 13px 27px rgba(47, 91, 214, .22);
    font-size: 18px;
}

.ha-v12-epp-modal-head small {
    display: block;
    margin-bottom: 3px;
    color: var(--ha3-blue-text);
    font-size: var(--ha-type-label, 11px);
    font-weight: 830;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ha-v12-epp-modal-head h2 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.ha-v12-epp-modal-head p {
    margin: 4px 0 0;
    color: var(--ha3-copy);
    font-size: var(--ha-type-small, 12px);
    line-height: 1.45;
}

.ha-v12-epp-modal-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    align-self: start;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    box-shadow: var(--ha3-shadow-xs);
    transition: color .16s ease, border-color .16s ease, transform .16s ease;
}

.ha-v12-epp-modal-close:hover,
.ha-v12-epp-modal-close:focus { color: var(--ha3-red-text); border-color: color-mix(in srgb, var(--ha3-red) 30%, var(--ha3-line)); transform: translateY(-1px); outline: 0; }

.ha-v12-epp-modal-body {
    min-height: 320px;
    padding: 25px 27px 27px;
    overflow: auto;
    overscroll-behavior: contain;
}

.ha-v12-epp-modal-loading {
    min-height: 265px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--ha3-copy);
    text-align: center;
}

.ha-v12-epp-modal-loading > span {
    width: 54px;
    height: 54px;
    display: grid;
    margin-bottom: 15px;
    place-items: center;
    color: var(--ha3-action);
    background: color-mix(in srgb, var(--ha3-action) 9%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha3-action) 18%, var(--ha3-line));
    border-radius: 17px;
    font-size: 18px;
}

.ha-v12-epp-modal-loading strong { color: var(--ha3-ink); font-size: 15px; font-weight: 790; }
.ha-v12-epp-modal-loading small { margin-top: 4px; color: var(--ha3-muted); font-size: 12px; }

.ha-v12-epp-modal-email {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 15px;
    gap: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ha3-action) 6%, var(--ha3-surface-soft)), var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha3-action) 15%, var(--ha3-line));
    border-radius: 16px;
}

.ha-v12-epp-modal-email > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-action) 10%, transparent);
    border-radius: 14px;
}

.ha-v12-epp-modal-email small { display: block; color: var(--ha3-muted); font-size: 10px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.ha-v12-epp-modal-email strong { display: block; margin-top: 1px; color: var(--ha3-ink); font-size: 14px; font-weight: 810; }
.ha-v12-epp-modal-email p { margin: 2px 0 0; color: var(--ha3-copy); font-size: 11px; }

.ha-v12-epp-modal .ha-v12-epp-notice { margin-bottom: 17px; }
.ha-v12-epp-modal .ha-v12-epp-trust { margin-top: 18px; padding-top: 15px; }

.ha-v12-epp-modal-foot {
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 23px;
    gap: 14px;
    color: var(--ha3-muted);
    background: color-mix(in srgb, var(--ha3-surface-soft) 72%, transparent);
    border-top: 1px solid var(--ha3-line);
    font-size: var(--ha-type-label, 11px);
    font-weight: 670;
}

.ha-v12-epp-modal-foot > span { display: inline-flex; align-items: center; gap: 7px; }
.ha-v12-epp-modal-foot > span i { color: var(--ha3-green-text); }
.ha-v12-epp-modal-fallback { display: inline-flex; align-items: center; gap: 7px; color: var(--ha3-blue-text) !important; font-weight: 750; text-decoration: none !important; white-space: nowrap; }

.ha-v12-epp-modal-success {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    padding: 17px;
    gap: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ha3-green) 10%, var(--ha3-surface-soft)), var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha3-green) 22%, var(--ha3-line));
    border-radius: 18px;
}

.ha-v12-epp-modal-success-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #0f865f, #126e98);
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(15, 125, 91, .2);
    font-size: 19px;
}

.ha-v12-epp-modal-success small { display: block; margin-bottom: 2px; color: var(--ha3-green-text); font-size: 10px; font-weight: 830; letter-spacing: .08em; text-transform: uppercase; }
.ha-v12-epp-modal-success h3 { margin: 0; color: var(--ha3-ink); font-size: 20px; font-weight: 840; letter-spacing: -.025em; }
.ha-v12-epp-modal-success p { margin: 4px 0 0; color: var(--ha3-copy); font-size: 12px; line-height: 1.5; }

.ha-v12-epp-modal-code-wrap { margin-top: 17px; }
.ha-v12-epp-modal-code-wrap > span { display: block; margin-bottom: 7px; color: var(--ha3-ink); font-size: 12px; font-weight: 780; }
.ha-v12-epp-modal-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 8px 8px 17px;
    gap: 12px;
    background: color-mix(in srgb, var(--ha3-action) 5%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha3-action) 20%, var(--ha3-line));
    border-radius: 15px;
}

.ha-v12-epp-modal-code code { overflow: auto; color: var(--ha3-ink); font-size: 17px; font-weight: 820; letter-spacing: .035em; white-space: nowrap; }
.ha-v12-epp-modal-code button { min-height: 42px; display: inline-flex; align-items: center; padding: 0 15px; gap: 7px; color: #fff; background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2)); border: 0; border-radius: 11px; box-shadow: 0 9px 22px rgba(31, 95, 208, .18); font-size: 12px; font-weight: 760; }

.ha-v12-epp-modal-warning {
    display: flex;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    gap: 9px;
    color: #8a5a1c;
    background: rgba(194, 122, 31, .08);
    border: 1px solid rgba(194, 122, 31, .2);
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.5;
}

.ha-v12-epp-modal-warning.is-info { color: var(--ha3-blue-text); background: color-mix(in srgb, var(--ha3-action) 7%, transparent); border-color: color-mix(in srgb, var(--ha3-action) 18%, transparent); }
.ha-v12-epp-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 17px; gap: 8px; }
.ha-v12-epp-modal-done,
.ha-v12-epp-modal-retry { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; gap: 8px; color: #fff !important; background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2)) !important; border: 0 !important; border-radius: 12px; font-size: 12px; font-weight: 780; }

.ha-v12-epp-modal-error { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ha3-copy); text-align: left; }
.ha-v12-epp-modal-error > span { width: 52px; height: 52px; display: grid; flex: 0 0 52px; place-items: center; color: var(--ha3-red-text); background: color-mix(in srgb, var(--ha3-red) 9%, transparent); border-radius: 16px; }
.ha-v12-epp-modal-error strong { color: var(--ha3-ink); font-size: 15px; }
.ha-v12-epp-modal-error p { max-width: 450px; margin: 4px 0 0; font-size: 12px; line-height: 1.5; }

html[data-ha-theme="dark"] .ha-v12-epp-modal { box-shadow: 0 42px 120px rgba(0, 0, 0, .58); }

@media (max-width: 575.98px) {
    .ha-v12-epp-modal-overlay { padding: 10px 0 0; place-items: end center; }
    .ha-v12-epp-modal { width: 100%; max-height: calc(100dvh - 10px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 23px 23px 0 0; transform: translateY(35px); }
    .ha-v12-epp-modal-head { grid-template-columns: 44px minmax(0, 1fr) 38px; padding: 16px 14px; gap: 10px; }
    .ha-v12-epp-modal-mark { width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
    .ha-v12-epp-modal-close { width: 38px; height: 38px; border-radius: 12px; }
    .ha-v12-epp-modal-head h2 { font-size: 19px; }
    .ha-v12-epp-modal-head p { display: none; }
    .ha-v12-epp-modal-body { min-height: 300px; padding: 18px 14px 20px; }
    .ha-v12-epp-modal-email { grid-template-columns: 42px minmax(0, 1fr); padding: 12px; }
    .ha-v12-epp-modal-email > span { width: 42px; height: 42px; }
    .ha-v12-epp-modal-foot { padding: 11px 14px; }
    .ha-v12-epp-modal-foot > span { display: none; }
    .ha-v12-epp-modal-fallback { width: 100%; justify-content: center; }
    .ha-v12-epp-modal-success { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
    .ha-v12-epp-modal-success-icon { width: 48px; height: 48px; border-radius: 15px; }
    .ha-v12-epp-modal-code { grid-template-columns: 1fr; padding: 13px; }
    .ha-v12-epp-modal-code code { padding: 3px; text-align: center; }
    .ha-v12-epp-modal-code button { width: 100%; justify-content: center; }
    .ha-v12-epp-modal-actions,
    .ha-v12-epp-modal-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ha-v12-epp-modal-overlay,
    .ha-v12-epp-modal { transition: none; }
}

/* Premium support-request flow — department choice and request composer. */
body.ha-v3-submit-ticket .ha-v3-page-submit-ticket {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0, rgba(116, 92, 248, .34), transparent 34%),
        radial-gradient(circle at 4% 120%, rgba(32, 194, 220, .19), transparent 37%),
        linear-gradient(135deg, #07182c 0%, #102e58 56%, #272b70 100%);
    border-color: rgba(130, 173, 232, .2);
    box-shadow: 0 24px 60px rgba(15, 38, 76, .18);
}

body.ha-v3-submit-ticket .ha-v3-page-submit-ticket::after {
    position: absolute;
    right: -65px;
    bottom: -120px;
    width: 235px;
    height: 235px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .026), 0 0 0 68px rgba(255, 255, 255, .018);
    pointer-events: none;
}

body.ha-v3-submit-ticket .ha-v3-page-submit-ticket .ha-v3-page-copy > span { color: #78d9f3 !important; }
body.ha-v3-submit-ticket .ha-v3-page-submit-ticket .ha-v3-page-copy h1 { color: #fff; }
body.ha-v3-submit-ticket .ha-v3-page-submit-ticket .ha-v3-page-copy p { color: rgba(226, 238, 252, .72); }
body.ha-v3-submit-ticket .ha-v3-page-submit-ticket .ha-v3-page-icon {
    position: relative;
    z-index: 1;
    color: #fff;
    background: linear-gradient(145deg, #2f8eff, #755df8);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 15px 34px rgba(40, 106, 235, .31);
}

body.ha-v11-ticket-submit .primary-content { min-width: 0; }

.ha-v11-support-card {
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 10%, var(--ha3-line));
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(24, 41, 70, .085);
}

.ha-v11-support-card > .card-body {
    padding: clamp(22px, 2.1vw, 34px) !important;
}

.ha-v11-support-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    padding-bottom: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v11-support-head-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2c8cf8, #735cf4);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 17px;
    box-shadow: 0 13px 30px rgba(52, 87, 220, .23), inset 0 1px rgba(255, 255, 255, .22);
    font-size: 17px;
}

.ha-v11-support-head > div:nth-child(2) > span {
    display: block;
    margin-bottom: 5px;
    color: var(--ha3-blue-text);
    font-size: var(--ha-type-label);
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ha-v11-support-head h2 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: clamp(22px, 1.6vw, 30px);
    font-weight: 880;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.ha-v11-support-head p {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--ha3-copy);
    font-size: var(--ha-type-ui);
    line-height: 1.55;
}

.ha-v11-support-head > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 8px;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue) 7%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 15%, var(--ha3-line));
    border-radius: 12px;
    font-size: var(--ha-type-small);
    font-weight: 790;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ha-v11-support-head > a:hover,
.ha-v11-support-head > a:focus {
    color: var(--ha3-blue-text);
    border-color: color-mix(in srgb, var(--ha3-blue) 34%, var(--ha3-line));
    box-shadow: 0 10px 22px rgba(45, 84, 196, .11);
    transform: translateY(-1px);
}

.ha-v11-department-grid {
    display: grid;
    margin-top: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.ha-v11-department-card {
    --ha-v11-tone: #377ff0;
    min-width: 0;
    min-height: 116px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    padding: 16px;
    gap: 13px;
    color: var(--ha3-ink);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ha-v11-tone) 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--ha-v11-tone) 3%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha-v11-tone) 16%, var(--ha3-line));
    border-radius: 17px;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(24, 41, 70, .035);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ha-v11-department-card.is-violet { --ha-v11-tone: #775ce9; }
.ha-v11-department-card.is-cyan { --ha-v11-tone: #16a9c8; }
.ha-v11-department-card.is-green { --ha-v11-tone: #1aa675; }
.ha-v11-department-card.is-amber { --ha-v11-tone: #d89421; }
.ha-v11-department-card.is-rose { --ha-v11-tone: #df5b75; }

.ha-v11-department-card:hover,
.ha-v11-department-card:focus {
    color: var(--ha3-ink);
    border-color: color-mix(in srgb, var(--ha-v11-tone) 38%, var(--ha3-line));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--ha-v11-tone) 13%, rgba(24, 41, 70, .07));
    transform: translateY(-3px);
}

.ha-v11-department-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--ha-v11-tone);
    background: color-mix(in srgb, var(--ha-v11-tone) 10%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha-v11-tone) 16%, var(--ha3-line));
    border-radius: 14px;
    font-size: 15px;
}

.ha-v11-department-copy { min-width: 0; }
.ha-v11-department-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ha3-ink);
    font-size: var(--ha-type-card-title);
    font-weight: 820;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ha-v11-department-copy small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--ha3-muted) !important;
    font-size: var(--ha-type-small);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.ha-v11-department-arrow { color: color-mix(in srgb, var(--ha-v11-tone) 70%, var(--ha3-muted)); font-size: 11px; transition: transform .18s ease; }
.ha-v11-department-card:hover .ha-v11-department-arrow { transform: translateX(3px); }

.ha-v11-support-note {
    display: flex;
    margin-top: 20px;
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
    color: #147054;
    background: color-mix(in srgb, #24b889 8%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, #24b889 18%, var(--ha3-line));
    border-radius: 14px;
}
.ha-v11-support-note > i { flex: 0 0 auto; font-size: 15px; }
.ha-v11-support-note strong,
.ha-v11-support-note small { display: block; }
.ha-v11-support-note strong { font-size: var(--ha-type-ui); font-weight: 820; }
.ha-v11-support-note small { margin-top: 2px; color: var(--ha3-copy) !important; font-size: var(--ha-type-small); }

.ha-v11-support-trust {
    display: grid;
    margin: 16px 0 22px;
    padding: 11px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    background: color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-soft));
    border: 1px solid var(--ha3-line);
    border-radius: 15px;
}
.ha-v11-support-trust span {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 8%, var(--ha3-line));
    border-radius: 10px;
    font-size: var(--ha-type-small);
    font-weight: 720;
    text-align: center;
}
.ha-v11-support-trust i { color: var(--ha3-blue-text); }

.ha-v11-composer-card .ha-v11-requester-row,
.ha-v11-composer-card .ha-v11-subject-row,
.ha-v11-composer-card .ha-v11-routing-row {
    display: grid;
    margin: 0 0 18px;
    gap: 14px;
}
.ha-v11-composer-card .ha-v11-requester-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ha-v11-composer-card .ha-v11-subject-row { grid-template-columns: minmax(0, 1fr); }
.ha-v11-composer-card .ha-v11-routing-row { grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.45fr) minmax(125px, .65fr); }

.ha-v11-composer-card :is(.ha-v11-requester-row, .ha-v11-subject-row, .ha-v11-routing-row) > .form-group {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ha-v11-composer-card label {
    margin-bottom: 7px;
    color: var(--ha3-ink);
    font-size: var(--ha-type-small);
    font-weight: 790;
}

.ha-v11-composer-card :is(input, select).form-control {
    min-height: 48px;
    padding-right: 14px;
    padding-left: 14px;
    color: var(--ha3-ink);
    background-color: var(--ha3-surface-soft);
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 10%, var(--ha3-line));
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .65);
}
.ha-v11-composer-card :is(input, select).form-control:focus {
    background-color: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--ha3-blue) 48%, var(--ha3-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ha3-blue) 11%, transparent) !important;
}
.ha-v11-composer-card .form-control.disabled {
    color: var(--ha3-muted);
    background: color-mix(in srgb, var(--ha3-line) 24%, var(--ha3-surface-soft));
    opacity: 1;
}

.ha-v11-message-block,
.ha-v11-attachment-block {
    margin: 0 0 18px;
    padding: 18px;
    background: color-mix(in srgb, var(--ha3-blue) 2%, var(--ha3-surface-soft));
    border: 1px solid var(--ha3-line);
    border-radius: 17px;
}
.ha-v11-message-block .md-editor {
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 13%, var(--ha3-line));
    border-radius: 14px;
    box-shadow: 0 7px 22px rgba(24, 41, 70, .035);
}
.ha-v11-message-block .md-header {
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-soft));
    border-bottom: 1px solid var(--ha3-line);
}
.ha-v11-message-block .md-input {
    min-height: 250px;
    padding: 15px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 0;
    border-radius: 0;
    font-size: var(--ha-type-ui);
    line-height: 1.65;
}

.ha-v11-attachment-block .attachment-group {
    min-height: 48px;
    padding: 5px;
    background: var(--ha3-surface-solid);
    border: 1px dashed color-mix(in srgb, var(--ha3-blue) 30%, var(--ha3-line));
    border-radius: 13px;
}
.ha-v11-attachment-block .custom-file-label { min-height: 36px; padding-top: 8px; border: 0; border-radius: 9px; }
.ha-v11-attachment-block .custom-file-label::after { min-height: 36px; padding-top: 8px; border: 0; border-left: 1px solid var(--ha3-line); }
.ha-v11-attachment-block #btnTicketAttachmentsAdd {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue) 8%, var(--ha3-surface-soft));
    border-color: color-mix(in srgb, var(--ha3-blue) 16%, var(--ha3-line));
    border-radius: 9px;
    font-size: var(--ha-type-small);
    font-weight: 780;
}
.ha-v11-attachment-block > .text-muted { margin-top: 9px; color: var(--ha3-muted) !important; font-size: var(--ha-type-small); }

.ha-v11-captcha-block { margin: 4px 0 18px !important; }
.ha-v11-ticket-actions {
    display: flex;
    margin: 0 !important;
    padding-top: 20px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--ha3-line);
}
.ha-v11-ticket-actions #openTicketSubmit {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, #2f7ff0, #6e58e9);
    border: 0;
    border-radius: 13px;
    font-size: var(--ha-type-ui);
    font-weight: 820;
    box-shadow: 0 13px 28px rgba(49, 81, 199, .23);
}
.ha-v11-ticket-actions .btn-default {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    font-size: var(--ha-type-ui);
    font-weight: 760;
}

@media (max-width: 1199.98px) {
    .ha-v11-department-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v11-composer-card .ha-v11-routing-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v11-composer-card .ha-v11-routing-row > .form-group:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    body.ha-v3-submit-ticket .ha-v3-page-submit-ticket { min-height: 132px; }
    .ha-v11-support-card { border-radius: 19px; }
    .ha-v11-support-card > .card-body { padding: 18px !important; }
    .ha-v11-support-head { grid-template-columns: 46px minmax(0, 1fr); padding-bottom: 18px; gap: 12px; }
    .ha-v11-support-head-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 14px; }
    .ha-v11-support-head h2 { font-size: 21px; }
    .ha-v11-support-head p { font-size: 13px; }
    .ha-v11-support-head > a { grid-column: 1 / -1; width: 100%; }
    .ha-v11-department-grid { margin-top: 17px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ha-v11-department-card { min-height: 100px; padding: 14px; }
    .ha-v11-support-note { align-items: flex-start; }
    .ha-v11-support-trust { grid-template-columns: minmax(0, 1fr); }
    .ha-v11-composer-card .ha-v11-requester-row,
    .ha-v11-composer-card .ha-v11-routing-row { grid-template-columns: minmax(0, 1fr); }
    .ha-v11-composer-card .ha-v11-routing-row > .form-group:last-child { grid-column: auto; }
    .ha-v11-message-block,
    .ha-v11-attachment-block { padding: 14px; border-radius: 14px; }
    .ha-v11-message-block .md-input { min-height: 210px; }
    .ha-v11-attachment-block .attachment-group { display: block; }
    .ha-v11-attachment-block #btnTicketAttachmentsAdd { width: 100%; margin-top: 7px; justify-content: center; }
    .ha-v11-ticket-actions { align-items: stretch; flex-direction: column-reverse; }
    .ha-v11-ticket-actions #openTicketSubmit,
    .ha-v11-ticket-actions .btn-default { width: 100%; justify-content: center; }
}

/*
 * Windows High Contrast replaces every colour, so surfaces defined only by
 * background colour collapse into one another. Restore structural borders and
 * keep icon glyphs on the system text colour.
 */
@media (forced-colors: active) {
    .ha-side-rail,
    .ha-dashboard-hero,
    .ha-v3-command,
    .ha-v3-toast,
    .ha-v6-list-insight,
    .ha-v4-credential-row,
    .ha-v3-service-tool,
    .ha-v5-domain-tool,
    .ha-v4-cpanel-shortcut {
        border: 1px solid CanvasText;
    }

    .ha-v3-status,
    .ha-v6-status-filter,
    .ha-v7-invoice-state {
        forced-color-adjust: none;
        color: CanvasText;
        background: Canvas;
        border: 1px solid CanvasText;
    }

    .ha-v6-status-filter.is-active {
        color: HighlightText;
        background: Highlight;
    }

    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid Highlight !important;
    }
}

/* ---------------------------------------------------------------------------
   Dark scheme completion

   The dark scheme previously covered the header, the DataTables list pages and
   a few alerts. Surfaces owned by custom.css and premium-v2.css kept their
   hardcoded light backgrounds and near-black text, so the account dropdowns,
   ordinary Bootstrap tables and the breadcrumb stayed light-on-light once the
   toggle was switched. These fill those gaps.
   --------------------------------------------------------------------------- */

/*
 * custom.css defines its own --ha-* palette and has no dark scheme of its own,
 * so those tokens kept their light values when the toggle was flipped. The most
 * visible casualty was `label, .col-form-label { color: var(--ha-ink) }`, which
 * left every form label in the client area at 1.22:1 - effectively invisible on
 * the dark canvas. Redefining the tokens here fixes every consumer at once.
 *
 * Measured on surface / canvas / soft:
 *   ink 15.45/17.10/14.56   muted 5.21/5.76/4.90   subtle 6.07/6.72/5.72
 *   brand 6.85/7.59/6.46    accent-dark 8.88/9.84/8.37   success 9.28/10.27/8.75
 */
html[data-ha-theme="dark"] {
    /*
     * premium-v2.css carries a third palette with no dark scheme of its own.
     * --ha2-ink is what left the current breadcrumb item at 1.07:1 on the dark
     * canvas. Same treatment as the --ha-* set below.
     */
    --ha2-ink: #edf4ff;
    --ha2-muted: #808fa6;
    --ha2-cyan: #4cc9f0;
    --ha2-red: #ff7b85;
    --ha2-blue: #7bacff;
    --ha2-emerald: #45d6a4;
    --ha2-violet: #a78bfa;

    --ha-ink: #edf4ff;
    --ha-muted: #808fa6;
    --ha-subtle: #8d9bb2;
    --ha-brand: #ff7b85;
    --ha-accent-dark: #4cc9f0;
    --ha-success: #45d6a4;
    --ha-danger: #ff7b85;
    --ha-canvas: #08111f;
}

/* Header dropdown panels. */
html[data-ha-theme="dark"] .ha-top-quick-menu,
html[data-ha-theme="dark"] .ha-top-account-menu,
html[data-ha-theme="dark"] .dropdown-menu {
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
}

html[data-ha-theme="dark"] .ha-top-quick-heading strong,
html[data-ha-theme="dark"] .ha-top-menu-heading span,
html[data-ha-theme="dark"] .ha-top-email-copy strong,
html[data-ha-theme="dark"] .dropdown-item,
html[data-ha-theme="dark"] .dropdown-menu a {
    color: var(--ha3-ink);
}

html[data-ha-theme="dark"] .ha-top-email-item:hover,
html[data-ha-theme="dark"] .dropdown-item:hover {
    background: var(--ha3-surface-soft);
}

/*
 * Surfaces whose background is a hardcoded light value in custom.css or
 * premium-v2.css. Tokenising them is not possible without editing those files,
 * so the dark scheme restates the background here. Each of these rendered
 * near-white in dark mode while the text on top switched to the dark-scheme
 * ink, leaving the content invisible:
 *   .tiles .tile        dashboard figures at 1.06:1
 *   .btn-default        button labels at 1.06:1
 *   .card-footer        footer text at 1.97:1
 */
html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile,
html[data-ha-theme="dark"] body.ha-premium-ready .card-footer,
html[data-ha-theme="dark"] body.ha-premium-ready .btn-default,
html[data-ha-theme="dark"] body.ha-premium-ready .btn-secondary,
html[data-ha-theme="dark"] .btn-default,
html[data-ha-theme="dark"] .btn-secondary {
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
}

html[data-ha-theme="dark"] body.ha-premium-ready .btn-default:hover,
html[data-ha-theme="dark"] body.ha-premium-ready .btn-secondary:hover,
html[data-ha-theme="dark"] .btn-default:hover,
html[data-ha-theme="dark"] .btn-secondary:hover {
    color: var(--ha3-ink);
    background: var(--ha3-surface-soft);
}

/*
 * .card-header carries a near-white gradient in premium-v2.css, so the card
 * title switched to the dark ink and disappeared. The sidebar variants share
 * the same gradient.
 */
html[data-ha-theme="dark"] body.ha-premium-ready .card-header,
html[data-ha-theme="dark"] body.ha-premium-ready .sidebar .card-header,
html[data-ha-theme="dark"] body.ha-premium-ready .panel-heading {
    color: var(--ha3-ink);
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
}

/* The account menu's "Switch Account" row measured 3.61:1. */
html[data-ha-theme="dark"] .ha-top-account-menu .dropdown-item,
html[data-ha-theme="dark"] .ha-top-account-menu .dropdown-item span {
    color: var(--ha3-ink);
}

html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile .stat,
html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile .title {
    color: var(--ha3-ink);
}

html[data-ha-theme="dark"] body.ha-dashboard .tiles .tile .title {
    color: var(--ha3-muted);
}

/* Ordinary Bootstrap tables outside the enhanced list pages. */
html[data-ha-theme="dark"] .table,
html[data-ha-theme="dark"] .table tbody td,
html[data-ha-theme="dark"] .table tbody th {
    color: var(--ha3-copy);
    background-color: transparent;
    border-color: var(--ha3-line);
}

html[data-ha-theme="dark"] body.ha-premium-ready .table thead th {
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
}

html[data-ha-theme="dark"] .breadcrumb {
    background: var(--ha3-surface-soft);
}

html[data-ha-theme="dark"] .card,
html[data-ha-theme="dark"] .panel,
html[data-ha-theme="dark"] .list-group-item {
    color: var(--ha3-copy);
    background-color: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
}

/*
 * Solid accent fills invert with the scheme: the -text tokens are dark on a
 * light canvas but bright on a dark one, so the label has to flip with them.
 * White on the dark-scheme green measured 1.9:1; the canvas ink gives 10.27:1.
 */
html[data-ha-theme="dark"] .ha-v4-credential-button.is-copied,
html[data-ha-theme="dark"] body.ha-v3-list-page .pagination .active .page-link {
    color: var(--ha3-canvas);
}

html[data-ha-theme="dark"] body.ha-client-shell .header {
    background: rgba(8, 17, 31, .92);
    box-shadow: 0 1px 0 var(--ha3-line), 0 12px 38px rgba(0, 0, 0, .18);
}

html[data-ha-theme="dark"] body.ha-client-shell .header .logo-img {
    filter: brightness(1.28) saturate(.92) drop-shadow(0 4px 12px rgba(0, 0, 0, .16));
}

html[data-ha-theme="dark"] body.ha-client-shell .ha-top-icon,
html[data-ha-theme="dark"] .ha-top-account-trigger,
html[data-ha-theme="dark"] body.ha-client-shell .ha-header-actions > .btn {
    color: var(--ha3-copy);
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
    box-shadow: none;
}

html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable thead th,
html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable thead th.sorting,
html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable thead th.sorting_asc,
html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable thead th.sorting_desc {
    color: var(--ha3-muted) !important;
    background-color: var(--ha3-surface-soft) !important;
}

html[data-ha-theme="dark"] body.ha-v3-list-page .dataTables_filter input {
    color: var(--ha3-ink) !important;
    background: var(--ha3-surface-soft) !important;
    border-color: var(--ha3-line) !important;
}

html[data-ha-theme="dark"] body.ha-v3-list-page .dataTables_wrapper > .listtable,
html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable,
html[data-ha-theme="dark"] body.ha-v3-list-page table.dataTable tbody td {
    background-color: var(--ha3-surface-solid) !important;
}

html[data-ha-theme="dark"] .ha-top-account-copy strong {
    color: var(--ha3-ink);
}

/* Command palette */

.ha-v3-command-layer[hidden] {
    display: none !important;
}

.ha-v3-command-layer {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: min(13vh, 110px) 20px 30px;
}

.ha-v3-command-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    background: rgba(5, 12, 23, .62);
    border: 0;
    backdrop-filter: blur(9px) saturate(120%);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
}

.ha-v3-command {
    position: relative;
    width: min(650px, 100%);
    overflow: hidden;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 45px 130px rgba(0, 0, 0, .35);
    animation: ha3-command-in .18s ease both;
}

@keyframes ha3-command-in {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ha-v3-command-input-wrap {
    height: 68px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 18px;
    gap: 11px;
    color: var(--ha3-muted);
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v3-command-input {
    width: 100%;
    height: 66px;
    color: var(--ha3-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 16px;
    font-weight: 650;
}

.ha-v3-command-input::placeholder {
    color: var(--ha3-muted);
    font-weight: 520;
}

.ha-v3-command-input-wrap kbd,
.ha-v3-command footer kbd {
    padding: 4px 7px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 7px;
    font-family: inherit;
    font-size: 8px;
}

.ha-v3-command-results {
    max-height: min(58vh, 520px);
    padding: 10px;
    overflow-y: auto;
}

.ha-v3-command-group {
    padding: 10px 10px 6px;
    color: var(--ha3-muted);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ha-v3-command-item {
    min-height: 56px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    color: var(--ha3-copy);
    border-radius: 13px;
    text-decoration: none !important;
}

.ha-v3-command-item.is-active,
.ha-v3-command-item:hover {
    color: var(--ha3-blue-text);
    background: linear-gradient(90deg, rgba(54, 127, 245, .09), rgba(119, 91, 247, .04));
}

.ha-v3-command-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .08);
    border-radius: 11px;
}

.ha-v3-command-item strong,
.ha-v3-command-item small {
    display: block;
}

.ha-v3-command-item strong {
    color: var(--ha3-ink);
    font-size: 11px;
    font-weight: 780;
}

.ha-v3-command-item small {
    margin-top: 3px;
    font-size: 8px;
}

.ha-v3-command-item > i {
    color: var(--ha3-muted);
    font-size: 9px;
}

.ha-v3-command footer {
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 16px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border-top: 1px solid var(--ha3-line);
    font-size: 8px;
}

.ha-v3-command footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ha-v3-command footer strong {
    margin-left: auto;
    color: var(--ha3-copy);
    font-size: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ha-v3-command-empty {
    min-height: 170px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--ha3-muted);
    text-align: center;
}

.ha-v3-command-empty i { font-size: 24px; }
.ha-v3-command-empty strong { color: var(--ha3-ink); font-size: 12px; }
.ha-v3-command-empty span { font-size: 9px; }

body.ha-command-open { overflow: hidden; }

.ha-v3-rail-tools {
    display: none;
}

/* Page identity */

.ha-v3-page-hero {
    min-height: 128px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 22px;
    padding: 22px 25px;
    gap: 17px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 0, rgba(54, 127, 245, .1), transparent 28%),
        linear-gradient(135deg, var(--ha3-surface-solid), var(--ha3-surface-soft));
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v3-page-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, var(--ha3-blue), var(--ha3-violet));
    border-radius: 17px;
    box-shadow: 0 13px 30px rgba(54, 127, 245, .22);
    font-size: 17px;
}

.ha-v3-page-copy > span {
    display: block;
    margin-bottom: 5px;
    color: var(--ha3-blue-text);
    font-size: 8px;
    font-weight: 830;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ha-v3-page-copy h1 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 830;
    letter-spacing: -.04em;
}

.ha-v3-page-copy p {
    margin: 7px 0 0;
    color: var(--ha3-copy);
    font-size: 11px;
}

.ha-v3-page-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2));
    border: 0;
    border-radius: 13px;
    box-shadow: 0 10px 25px rgba(54, 127, 245, .2);
    font-size: 10px;
    font-weight: 770;
}

.ha-v3-original-header {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Dashboard intelligence */

body.ha-v3-dashboard .ha-dashboard-hero {
    min-height: 278px;
}

.ha-v3-hero-signal {
    display: inline-grid;
    grid-template-columns: 8px auto;
    align-items: center;
    margin-top: 17px;
    gap: 0 8px;
}

.ha-v3-signal-dot {
    grid-row: 1 / 3;
    width: 8px;
    height: 8px;
    background: #4fd9a9;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(79, 217, 169, .1), 0 0 16px rgba(79, 217, 169, .45);
}

.ha-v3-hero-signal strong,
.ha-v3-hero-signal small {
    display: block;
}

.ha-v3-hero-signal strong {
    color: rgba(255, 255, 255, .83);
    font-size: 9px;
    font-weight: 750;
}

.ha-v3-hero-signal small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .43) !important;
    font-size: 7px;
}

.ha-v3-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    margin: 2px 0 24px;
    gap: 15px;
}

.ha-v3-workspace-main,
.ha-v3-next-action,
.ha-v3-updates {
    background: var(--ha3-surface);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-xs);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ha-v3-workspace-main,
.ha-v3-updates {
    padding: 22px;
}

.ha-v3-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    gap: 15px;
}

.ha-v3-section-heading span {
    display: block;
    margin-bottom: 4px;
    color: var(--ha3-blue-text);
    font-size: 7px;
    font-weight: 840;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ha-v3-section-heading h2 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: 17px;
    font-weight: 820;
    letter-spacing: -.03em;
}

.ha-v3-section-heading > a,
.ha-v3-text-button {
    color: var(--ha3-blue-text);
    background: transparent;
    border: 0;
    font-size: 8px;
    font-weight: 780;
    text-decoration: none !important;
}

.ha-v3-text-button i { margin-right: 4px; }

.ha-v3-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ha-v3-health-item {
    --health-tone: var(--ha3-blue);
    min-height: 67px;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 10px;
    align-items: center;
    padding: 9px 10px;
    gap: 8px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border: 1px solid transparent;
    border-radius: 14px;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ha-v3-health-item:hover {
    color: var(--health-tone);
    background: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--health-tone) 20%, transparent);
    transform: translateY(-2px);
}

.ha-v3-health-item.tone-violet { --health-tone: var(--ha3-violet); }
.ha-v3-health-item.tone-cyan { --health-tone: var(--ha3-cyan); }
.ha-v3-health-item.tone-red { --health-tone: var(--ha3-red); }
.ha-v3-health-item.tone-green { --health-tone: var(--ha3-green); }
.ha-v3-health-item.tone-navy { --health-tone: #52627a; }

.ha-v3-health-icon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--health-tone);
    background: color-mix(in srgb, var(--health-tone) 9%, transparent);
    border-radius: 11px;
    font-size: 11px;
}

.ha-v3-health-item small,
.ha-v3-health-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-v3-health-item small {
    margin-bottom: 3px;
    color: var(--ha3-muted) !important;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.ha-v3-health-item strong {
    color: var(--ha3-ink);
    font-size: 9px;
    font-weight: 770;
}

.ha-v3-health-item > i { font-size: 7px; }

.ha-v3-next-action {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(54, 127, 245, .15), transparent 45%),
        linear-gradient(145deg, #0b1729, #102542);
    border-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.ha-v3-next-action::after {
    position: absolute;
    right: -42px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    content: "";
    background: radial-gradient(circle, rgba(119, 91, 247, .18), transparent 67%);
}

.ha-v3-next-eyebrow {
    color: #7fd9f7;
    font-size: 7px;
    font-weight: 830;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ha-v3-next-icon {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 19px 0 16px;
    color: #fff;
    background: linear-gradient(145deg, var(--ha3-blue), var(--ha3-violet));
    border-radius: 14px;
    box-shadow: 0 13px 30px rgba(54, 127, 245, .25);
}

.ha-v3-next-action h3 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.ha-v3-next-action p {
    margin: 9px 0 18px;
    color: rgba(224, 233, 246, .6);
    font-size: 9px;
    line-height: 1.65;
}

.ha-v3-next-action .btn {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding: 0 13px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    font-size: 8px;
    font-weight: 760;
}

.ha-v3-updates {
    margin-bottom: 24px;
}

.ha-v3-update-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.ha-v3-update-item {
    min-height: 66px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 10px;
    align-items: center;
    padding: 9px 10px;
    gap: 8px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border-radius: 13px;
    text-decoration: none !important;
}

.ha-v3-update-item:hover { color: var(--ha3-blue-text); }
.ha-v3-update-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ha3-blue-text); background: rgba(54, 127, 245, .08); border-radius: 10px; }
.ha-v3-update-item strong, .ha-v3-update-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-v3-update-item strong { color: var(--ha3-ink); font-size: 9px; font-weight: 740; }
.ha-v3-update-item small { margin-top: 3px; font-size: 7px; text-transform: uppercase; }
.ha-v3-update-item > i { font-size: 7px; }

/* Premium data workspaces */

.ha-v3-list-toolbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 10px 12px;
    gap: 15px;
    background: var(--ha3-surface);
    border: 1px solid var(--ha3-line);
    border-radius: 17px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v3-list-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.ha-v3-list-symbol {
    width: 42px;
    height: 42px;
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .08);
    border-radius: 13px;
}

.ha-v3-list-summary strong,
.ha-v3-list-summary small {
    display: block;
}

.ha-v3-list-summary strong {
    color: var(--ha3-ink);
    font-size: 11px;
    font-weight: 790;
}

.ha-v3-list-summary small {
    margin-top: 3px;
    font-size: 8px;
}

.ha-v3-view-switch {
    display: inline-flex;
    padding: 3px;
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 11px;
}

.ha-v3-view-switch button {
    width: 34px;
    height: 32px;
    color: var(--ha3-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 10px;
}

.ha-v3-view-switch button.is-active {
    color: var(--ha3-blue-text);
    background: var(--ha3-surface-solid);
    box-shadow: var(--ha3-shadow-xs);
}

body.ha-v3-list-page .dataTables_wrapper > .listtable {
    padding: 0;
    overflow: visible;
    background: var(--ha3-surface);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-xs);
}

body.ha-v3-list-page .dataTables_filter {
    padding: 15px 16px 10px;
}

body.ha-v3-list-page .dataTables_filter label {
    position: relative;
    width: min(360px, 100%);
    margin: 0;
}

body.ha-v3-list-page .dataTables_filter label::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: var(--ha3-muted);
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    transform: translateY(-50%);
}

body.ha-v3-list-page .dataTables_filter input {
    width: 100% !important;
    height: 42px;
    margin: 0 !important;
    padding-left: 35px;
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
    border-radius: 12px;
    font-size: 10px;
}

body.ha-v3-list-page .dataTables_info {
    padding: 0 16px 12px !important;
    font-size: 8px;
}

body.ha-v3-list-page table.dataTable {
    margin: 0 !important;
    border-top: 1px solid var(--ha3-line);
}

body.ha-v3-list-page table.dataTable thead th {
    height: 49px;
    padding: 10px 13px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.ha-v3-list-page table.dataTable tbody td {
    height: 64px;
    padding: 12px 13px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border-color: var(--ha3-line);
    font-size: 9px;
    vertical-align: middle;
}

body.ha-v3-list-page table.dataTable tbody tr:hover td {
    background: color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-solid));
}

body.ha-v3-list-page table.dataTable tbody td strong,
body.ha-v3-list-page table.dataTable tbody td a {
    color: var(--ha3-ink);
    font-weight: 720;
}

body.ha-v3-list-page .dataTables_paginate {
    padding: 13px 16px !important;
}

body.ha-v3-list-page .pagination .page-link {
    color: var(--ha3-copy);
    background: var(--ha3-surface-soft);
    border-color: var(--ha3-line);
}

body.ha-v3-list-page .pagination .active .page-link {
    color: #fff;
    background: var(--ha3-blue-text);
    border-color: var(--ha3-blue-text);
}

/* Optional desktop card view and forced mobile cards */

.dataTables_wrapper.ha-view-cards table.dataTable,
.dataTables_wrapper.ha-view-cards table.dataTable tbody,
.dataTables_wrapper.ha-view-cards table.dataTable tr,
.dataTables_wrapper.ha-view-cards table.dataTable td {
    display: block !important;
    width: 100% !important;
}

.dataTables_wrapper.ha-view-cards table.dataTable thead {
    display: none;
}

.dataTables_wrapper.ha-view-cards table.dataTable tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 11px;
    background: var(--ha3-surface-soft);
}

.dataTables_wrapper.ha-view-cards table.dataTable tr.ha-v3-record {
    position: relative;
    min-width: 0;
    padding: 13px 14px 10px;
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 16px;
    box-shadow: var(--ha3-shadow-xs);
}

.dataTables_wrapper.ha-view-cards table.dataTable tr.ha-v3-record::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--ha3-blue), var(--ha3-violet));
}

.dataTables_wrapper.ha-view-cards table.dataTable tr.ha-v3-record td {
    min-height: 39px;
    height: auto;
    display: grid !important;
    grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr);
    align-items: center;
    padding: 8px 3px;
    gap: 10px;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--ha3-line);
    text-align: right !important;
}

.dataTables_wrapper.ha-view-cards table.dataTable tr.ha-v3-record td:last-child {
    border-bottom: 0;
}

.dataTables_wrapper.ha-view-cards table.dataTable td::before {
    color: var(--ha3-muted);
    content: attr(data-label);
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

/* Security center */

.ha-v3-security-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    gap: 10px;
}

.ha-v3-security-card {
    --security-tone: var(--ha3-blue);
    position: relative;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 17px;
    overflow: hidden;
    color: var(--ha3-copy);
    background: var(--ha3-surface);
    border: 1px solid var(--ha3-line);
    border-radius: 18px;
    box-shadow: var(--ha3-shadow-xs);
    text-decoration: none !important;
}

.ha-v3-security-card.tone-green { --security-tone: var(--ha3-green); }
.ha-v3-security-card.tone-violet { --security-tone: var(--ha3-violet); }
.ha-v3-security-card.tone-cyan { --security-tone: var(--ha3-cyan); }

.ha-v3-security-card > span {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--security-tone);
    background: color-mix(in srgb, var(--security-tone) 9%, transparent);
    border-radius: 12px;
}

.ha-v3-security-card small {
    color: var(--ha3-muted) !important;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ha-v3-security-card strong {
    margin-top: 5px;
    color: var(--ha3-ink);
    font-size: 10px;
    font-weight: 770;
}

.ha-v3-security-card > i {
    position: absolute;
    right: 15px;
    bottom: 15px;
    color: var(--security-tone);
    font-size: 9px;
}

/* Toasts */

.ha-v3-toast-region {
    position: fixed;
    z-index: 13000;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
}

.ha-v3-toast {
    min-width: 270px;
    min-height: 62px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    padding: 10px 13px;
    gap: 10px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 15px;
    box-shadow: var(--ha3-shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}

.ha-v3-toast.is-visible { opacity: 1; transform: translateY(0); }
.ha-v3-toast > span { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ha3-green-text); background: rgba(24, 183, 132, .09); border-radius: 11px; }
.ha-v3-toast strong, .ha-v3-toast small { display: block; }
.ha-v3-toast strong { font-size: 10px; font-weight: 780; }
.ha-v3-toast small { margin-top: 3px; font-size: 8px; }

/* Premium authentication experience */

body.ha-v3-login {
    min-height: 100vh;
    background:
        radial-gradient(circle at 4% 20%, rgba(33, 184, 232, .1), transparent 25rem),
        radial-gradient(circle at 94% 14%, rgba(119, 91, 247, .1), transparent 28rem),
        linear-gradient(135deg, color-mix(in srgb, var(--ha3-canvas) 96%, #fff), var(--ha3-canvas));
}

body.ha-v3-login::before {
    position: fixed;
    z-index: -1;
    inset: 76px 0 0;
    content: "";
    background-image:
        linear-gradient(rgba(80, 105, 145, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 105, 145, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 85%);
    pointer-events: none;
}

body.ha-v3-login .ha-side-rail,
body.ha-v3-login .ha-rail-backdrop,
body.ha-v3-login .ha-rail-toggle,
body.ha-v3-login .ha-top-account,
body.ha-v3-login .ha-top-email,
body.ha-v3-login .ha-top-network,
body.ha-v3-login .ha-top-cart,
body.ha-v3-login .ha-top-admin,
body.ha-v3-login .ha-v3-command-trigger,
body.ha-v3-login .master-breadcrumb,
body.ha-v3-login .ha-v3-mobile-dock {
    display: none !important;
}

body.ha-v3-login .header {
    border-bottom: 1px solid var(--ha3-line);
    box-shadow: 0 10px 35px rgba(20, 38, 68, .04);
}

html[data-ha-theme="dark"] body.ha-v3-login .header {
    background: rgba(8, 17, 31, .86);
    border-bottom-color: rgba(157, 180, 214, .1);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.ha-v3-login .header .navbar-light > .container {
    padding-left: 24px;
    padding-right: 24px;
}

body.ha-v3-login .ha-top-panel {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    gap: 9px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    box-shadow: var(--ha3-shadow-xs);
    font-size: 9px;
    font-weight: 780;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup:hover,
body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup:focus {
    color: var(--ha3-blue-text);
    border-color: rgba(54, 127, 245, .28);
    box-shadow: var(--ha3-shadow-sm);
    transform: translateY(-1px);
}

body.ha-v3-login #main-body {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    padding: 34px 0 42px;
}

body.ha-v3-login #main-body > .container {
    width: 100%;
    max-width: 1260px;
    padding-right: 24px;
    padding-left: 24px;
}

body.ha-v3-login #main-body > .container > .row {
    margin: 0;
}

body.ha-v3-login #main-body .ha-shell-primary {
    padding: 0;
}

.ha-v3-auth-shell {
    width: 100%;
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 30px;
    box-shadow: 0 34px 110px rgba(18, 38, 70, .16);
    isolation: isolate;
}

html[data-ha-theme="dark"] .ha-v3-auth-shell {
    box-shadow: 0 38px 120px rgba(0, 0, 0, .42);
}

.ha-v3-auth-story {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px 46px 38px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(65, 142, 255, .26), transparent 30%),
        radial-gradient(circle at 3% 98%, rgba(239, 71, 85, .21), transparent 33%),
        linear-gradient(145deg, #07111f 0%, #0c1d35 48%, #102c4c 100%);
}

.ha-v3-auth-story::before {
    position: absolute;
    top: -160px;
    right: -135px;
    width: 430px;
    height: 430px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px rgba(255, 255, 255, .025),
        0 0 0 96px rgba(255, 255, 255, .018);
    pointer-events: none;
}

.ha-v3-auth-story::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62%;
    height: 50%;
    content: "";
    background-image: radial-gradient(rgba(255, 255, 255, .13) .75px, transparent .75px);
    background-size: 12px 12px;
    mask-image: linear-gradient(135deg, transparent, rgba(0, 0, 0, .82));
    pointer-events: none;
}

.ha-v3-auth-ambient span {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
}

.ha-v3-auth-ambient span:nth-child(1) { top: 18%; right: 18%; width: 7px; height: 7px; background: #4b91ff; box-shadow: 0 0 22px #4b91ff; }
.ha-v3-auth-ambient span:nth-child(2) { top: 55%; left: 9%; width: 5px; height: 5px; background: #29c6f2; box-shadow: 0 0 18px #29c6f2; }
.ha-v3-auth-ambient span:nth-child(3) { right: 30%; bottom: 13%; width: 6px; height: 6px; background: #ec5260; box-shadow: 0 0 20px #ec5260; }

.ha-v3-auth-story-top,
.ha-v3-auth-story-copy,
.ha-v3-auth-story-foot {
    position: relative;
    z-index: 1;
}

.ha-v3-auth-story-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ha-v3-auth-shield {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #4b91ff, #6e5df7);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(66, 115, 244, .35), inset 0 1px rgba(255, 255, 255, .25);
}

.ha-v3-auth-story-top strong,
.ha-v3-auth-story-top small {
    display: block;
}

.ha-v3-auth-story-top strong { color: #fff; font-size: 14px; font-weight: 820; letter-spacing: -.02em; }
.ha-v3-auth-story-top small { margin-top: 2px; color: rgba(220, 233, 252, .58) !important; font-size: 8px; font-weight: 650; letter-spacing: .04em; }

.ha-v3-auth-story-copy {
    max-width: 525px;
    margin: 45px 0 36px;
}

.ha-v3-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(224, 236, 254, .68);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ha-v3-auth-eyebrow i {
    width: 7px;
    height: 7px;
    background: #38d39f;
    border: 2px solid rgba(56, 211, 159, .22);
    border-radius: 50%;
    box-shadow: 0 0 17px rgba(56, 211, 159, .72);
}

.ha-v3-auth-story-copy h1 {
    margin: 20px 0 17px;
    color: #fff;
    font-size: clamp(38px, 3.6vw, 58px);
    font-weight: 820;
    letter-spacing: -.055em;
    line-height: .98;
}

.ha-v3-auth-story-copy h1 em {
    color: #a8caff;
    font-style: normal;
}

.ha-v3-auth-story-copy > p {
    max-width: 485px;
    margin: 0;
    color: rgba(220, 233, 252, .66);
    font-size: 11px;
    line-height: 1.75;
}

.ha-v3-auth-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
    padding-top: 28px;
    gap: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.ha-v3-auth-benefits > span {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
}

.ha-v3-auth-benefits > span > i {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8eb8fb;
    background: rgba(89, 145, 234, .12);
    border: 1px solid rgba(142, 184, 251, .12);
    border-radius: 9px;
    font-size: 9px;
}

/* nowrap + ellipsis clipped "Everything in one place" inside the 3-column
   grid. These labels are short, so wrap the second line instead of hiding it. */
.ha-v3-auth-benefits b,
.ha-v3-auth-benefits small { min-width: 0; display: block; overflow-wrap: anywhere; }
.ha-v3-auth-benefits b { color: #fff; font-size: 8px; font-weight: 760; }
/* .46 alpha measured 3.63:1 - 4.00:1 across the panel gradient; .62 gives
   5.35:1 - 6.39:1. */
.ha-v3-auth-benefits small { margin-top: 2px; color: rgba(220, 233, 252, .62) !important; font-size: 6px; line-height: 1.35; }

.ha-v3-auth-story-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    color: rgba(220, 233, 252, .56);
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 8px;
}

.ha-v3-auth-story-foot span { display: inline-flex; align-items: center; gap: 7px; }
.ha-v3-auth-story-foot span i { color: #38d39f; }
.ha-v3-auth-story-foot small { color: rgba(220, 233, 252, .42) !important; font-size: 7px; }

.ha-v3-auth-main {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 54px;
    background: radial-gradient(circle at 100% 0, rgba(54, 127, 245, .055), transparent 15rem),
        var(--ha3-surface-solid);
}

.ha-v3-auth-main-inner {
    width: 100%;
    max-width: 420px;
}

.ha-v3-auth-main .login-form,
.ha-v3-auth-main .login-form > .card {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

.ha-v3-auth-main .login-form > .card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ha-v3-auth-main .card-body {
    padding: 0 !important;
}

.ha-v3-auth-main .card-body > .mb-4 {
    margin-bottom: 30px !important;
}

.ha-v3-auth-card-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 17px;
    padding: 7px 10px;
    gap: 7px;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .075);
    border: 1px solid rgba(54, 127, 245, .1);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ha-v3-auth-main .card-body h6 {
    margin: 0 0 8px;
    color: var(--ha3-ink);
    font-size: 29px;
    font-weight: 820;
    letter-spacing: -.04em;
}

.ha-v3-auth-main .card-body > .mb-4 p {
    color: var(--ha3-muted) !important;
    font-size: 10px;
    line-height: 1.6;
}

.ha-v3-auth-main .form-group {
    margin-bottom: 19px;
}

.ha-v3-auth-main .form-control-label,
.ha-v3-auth-main .form-group label {
    margin-bottom: 7px;
    color: var(--ha3-copy);
    font-size: 8px;
    font-weight: 790;
    letter-spacing: .015em;
}

.ha-v3-auth-main .form-group .small.text-muted {
    color: var(--ha3-blue-text) !important;
    font-size: 8px;
    font-weight: 720;
    text-decoration: none;
}

.ha-v3-auth-main .input-group {
    height: 54px;
    overflow: hidden;
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 15px;
    box-shadow: inset 0 1px 2px rgba(15, 32, 59, .025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ha-v3-auth-main .input-group:focus-within {
    background: var(--ha3-surface-solid);
    border-color: rgba(54, 127, 245, .48);
    box-shadow: 0 0 0 4px rgba(54, 127, 245, .09), 0 10px 28px rgba(36, 84, 160, .06);
}

.ha-v3-auth-main .input-group-text,
.ha-v3-auth-main .input-group .form-control,
.ha-v3-auth-main .input-group .btn {
    height: 100%;
    color: var(--ha3-ink);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ha-v3-auth-main .input-group-text {
    min-width: 48px;
    justify-content: center;
    color: var(--ha3-muted);
    font-size: 10px;
}

.ha-v3-auth-main .input-group .form-control {
    min-width: 0;
    padding-right: 13px;
    padding-left: 2px;
    font-size: 10px;
}

.ha-v3-auth-main .input-group .form-control::placeholder { color: var(--ha3-muted); }
.ha-v3-auth-main .btn-reveal-pw { width: 48px; color: var(--ha3-muted) !important; }
.ha-v3-auth-main .btn-reveal-pw:hover { color: var(--ha3-blue-text) !important; }

.ha-v3-auth-main .ha-v3-auth-options {
    margin: 4px 0 17px;
    text-align: left !important;
}

.ha-v3-auth-main .ha-v3-auth-options label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: 9px;
    color: var(--ha3-copy);
    cursor: pointer;
    font-size: 8px;
}

.ha-v3-auth-main .ha-v3-auth-options .form-check-input {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ha3-blue-text);
}

.ha-v3-auth-main .card-body > .float-left {
    width: 100%;
    float: none !important;
}

.ha-v3-auth-main #login {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    color: #fff;
    /* White on the light end of the old #367ff5 -> #665df4 ramp measured
       3.81:1. This ramp keeps the same hue travel at 5.82:1 -> 7.02:1. */
    background: linear-gradient(110deg, #1f5fd0, #4b3fd4);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(62, 105, 239, .25);
    font-size: 9px;
    font-weight: 790;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ha-v3-auth-main #login:hover,
.ha-v3-auth-main #login:focus {
    color: #fff;
    box-shadow: 0 18px 38px rgba(62, 105, 239, .34);
    transform: translateY(-1px);
}

.ha-v3-auth-main .card-footer {
    margin-top: 21px;
    padding: 18px 0 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--ha3-line);
    text-align: center;
}

.ha-v3-auth-main .card-footer small { font-size: 8px; }
.ha-v3-auth-main .card-footer a { margin-left: 5px; color: var(--ha3-blue-text); font-size: 8px; font-weight: 780 !important; }

.ha-v3-auth-assurance {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    margin-top: 20px;
    padding: 12px 13px;
    gap: 10px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
}

.ha-v3-auth-assurance > i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ha3-green-text);
    background: rgba(24, 183, 132, .08);
    border-radius: 10px;
    font-size: 9px;
}

.ha-v3-auth-assurance strong,
.ha-v3-auth-assurance small { display: block; }
.ha-v3-auth-assurance strong { color: var(--ha3-copy); font-size: 8px; font-weight: 760; }
.ha-v3-auth-assurance small { margin-top: 3px; color: var(--ha3-muted) !important; font-size: 7px; }

body.ha-v3-login .providerLinkingFeedback:not(:empty) {
    max-width: 1180px;
    margin: 0 auto 14px;
}

body.ha-v3-login .footer {
    margin: 0;
    padding: 25px 0 30px;
    background: transparent;
    border-top: 1px solid var(--ha3-line);
}

body.ha-v3-login .footer > .container {
    padding-left: 15px;
}

/* Premium registration onboarding */

body.ha-v3-register {
    min-height: 100vh;
    background: radial-gradient(circle at 2% 13%, rgba(33, 184, 232, .09), transparent 27rem),
        radial-gradient(circle at 98% 10%, rgba(119, 91, 247, .09), transparent 30rem),
        var(--ha3-canvas);
}

body.ha-v3-register .ha-side-rail,
body.ha-v3-register .ha-rail-backdrop,
body.ha-v3-register .ha-rail-toggle,
body.ha-v3-register .ha-top-account,
body.ha-v3-register .ha-top-email,
body.ha-v3-register .ha-top-network,
body.ha-v3-register .ha-top-cart,
body.ha-v3-register .ha-top-admin,
body.ha-v3-register .ha-v3-command-trigger,
body.ha-v3-register .master-breadcrumb,
body.ha-v3-register .ha-v3-mobile-dock {
    display: none !important;
}

body.ha-v3-register .header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--ha3-line);
    box-shadow: 0 10px 35px rgba(20, 38, 68, .04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-ha-theme="dark"] body.ha-v3-register .header {
    background: rgba(8, 17, 31, .88);
    border-bottom-color: rgba(157, 180, 214, .1);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
}

body.ha-v3-register .header .navbar-light > .container {
    padding-right: 24px;
    padding-left: 24px;
}

body.ha-v3-register .ha-top-panel {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.ha-v3-register #main-body {
    padding: 34px 0 46px;
}

body.ha-v3-register #main-body > .container {
    width: 100%;
    max-width: 1320px;
    padding-right: 24px;
    padding-left: 24px;
}

body.ha-v3-register #main-body > .container > .row { margin: 0; }
body.ha-v3-register #main-body .ha-shell-primary { padding: 0; }

.ha-v3-register-shell {
    width: 100%;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.ha-v3-register-story {
    position: sticky;
    top: 100px;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    padding: 31px 29px 27px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 110% 0, rgba(75, 145, 255, .32), transparent 35%),
        radial-gradient(circle at -10% 105%, rgba(239, 71, 85, .22), transparent 34%),
        linear-gradient(150deg, #07111f 0, #0c1d35 54%, #112b49 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 28px;
    box-shadow: 0 30px 85px rgba(7, 17, 31, .24);
    isolation: isolate;
}

.ha-v3-register-story-glow {
    position: absolute;
    z-index: -1;
    top: -125px;
    right: -125px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255, 255, 255, .025), 0 0 0 84px rgba(255, 255, 255, .015);
}

.ha-v3-register-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ha-v3-register-brand > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #4b91ff, #6e5df7);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(66, 115, 244, .34);
}

.ha-v3-register-brand strong,
.ha-v3-register-brand small { display: block; }
.ha-v3-register-brand strong { color: #fff; font-size: 12px; font-weight: 820; }
.ha-v3-register-brand small { margin-top: 2px; color: rgba(220, 233, 252, .5) !important; font-size: 7px; }

.ha-v3-register-copy { margin: 42px 0 31px; }

.ha-v3-register-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(220, 233, 252, .64);
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ha-v3-register-eyebrow i {
    width: 7px;
    height: 7px;
    background: #38d39f;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(56, 211, 159, .72);
}

.ha-v3-register-copy h1 {
    margin: 16px 0 14px;
    color: #fff;
    font-size: 37px;
    font-weight: 820;
    letter-spacing: -.055em;
    line-height: 1;
}

.ha-v3-register-copy h1 em { color: #a8caff; font-style: normal; }
.ha-v3-register-copy p { margin: 0; color: rgba(220, 233, 252, .59); font-size: 9px; line-height: 1.7; }

.ha-v3-register-steps {
    display: grid;
    gap: 7px;
}

.ha-v3-register-steps a {
    position: relative;
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px 11px;
    column-gap: 10px;
    color: rgba(220, 233, 252, .66);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 13px;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ha-v3-register-steps a:hover,
.ha-v3-register-steps a:focus {
    color: #fff;
    background: rgba(75, 145, 255, .1);
    border-color: rgba(125, 174, 255, .18);
    transform: translateX(2px);
}

.ha-v3-register-steps a > span {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #91baf8;
    background: rgba(75, 145, 255, .11);
    border-radius: 10px;
    font-size: 7px;
    font-weight: 820;
}

.ha-v3-register-steps b { grid-column: 2; align-self: end; color: #fff; font-size: 8px; font-weight: 740; }
.ha-v3-register-steps small { grid-column: 2; align-self: start; margin-top: 1px; color: rgba(220, 233, 252, .4) !important; font-size: 6px; }
.ha-v3-register-steps a > i { grid-column: 3; grid-row: 1 / 3; color: rgba(220, 233, 252, .18); font-size: 7px; }

.ha-v3-register-progress {
    margin-top: auto;
    padding-top: 27px;
}

.ha-v3-register-progress > div {
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.ha-v3-register-progress > div > span {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #37c3ef, #6d64f7);
    border-radius: inherit;
    box-shadow: 0 0 14px rgba(71, 148, 245, .55);
    transition: width .3s ease;
}

.ha-v3-register-progress p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 9px 0 0;
}

.ha-v3-register-progress strong { color: #fff; font-size: 9px; font-weight: 800; }
.ha-v3-register-progress small { color: rgba(220, 233, 252, .42) !important; font-size: 6px; }
.ha-v3-register-progress.is-complete > div > span { background: #38d39f; }

.ha-v3-register-story-foot {
    margin-top: 19px;
    padding-top: 18px;
    color: rgba(220, 233, 252, .47);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 7px;
}

.ha-v3-register-story-foot i { margin-right: 6px; color: #38d39f; }

.ha-v3-register-main { min-width: 0; }

.ha-v3-register-intro {
    margin-bottom: 18px;
    padding: 27px 30px;
    background: radial-gradient(circle at 96% 4%, rgba(54, 127, 245, .08), transparent 13rem),
        var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 22px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v3-register-intro > span {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    gap: 7px;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .075);
    border: 1px solid rgba(54, 127, 245, .1);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ha-v3-register-intro h2 {
    margin: 15px 0 7px;
    color: var(--ha3-ink);
    font-size: 29px;
    font-weight: 820;
    letter-spacing: -.04em;
}

.ha-v3-register-intro p { max-width: 650px; margin: 0; color: var(--ha3-muted); font-size: 9px; line-height: 1.65; }

.ha-v3-register-card {
    margin-bottom: 18px !important;
    overflow: visible;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 22px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v3-register-card > .card-body { padding: 28px 30px !important; }

.ha-v3-register-heading {
    display: flex;
    align-items: center;
    margin: 0 0 23px;
    gap: 12px;
}

.ha-v3-register-heading:not(:first-child) {
    margin-top: 29px;
    padding-top: 28px;
    border-top: 1px solid var(--ha3-line);
}

.ha-v3-register-heading-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .075);
    border: 1px solid rgba(54, 127, 245, .09);
    border-radius: 12px;
    font-size: 10px;
}

.ha-v3-register-heading-copy strong,
.ha-v3-register-heading-copy small { display: block; }
.ha-v3-register-heading-copy strong { color: var(--ha3-ink); font-size: 12px; font-weight: 790; letter-spacing: -.02em; }
.ha-v3-register-heading-copy small { margin-top: 3px; color: var(--ha3-muted) !important; font-size: 7px; font-weight: 590; }

.ha-v3-register-card .row { margin-right: -7px; margin-left: -7px; }
.ha-v3-register-card [class*="col-"] { padding-right: 7px; padding-left: 7px; }
.ha-v3-register-card .form-group { position: relative; margin-bottom: 14px; }

.ha-v3-register-card input.field,
.ha-v3-register-card select.field,
.ha-v3-register-card textarea.field,
.ha-v3-register-card .form-control {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    box-shadow: inset 0 1px 2px rgba(15, 32, 59, .025);
    font-size: 9px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ha-v3-register-card .prepend-icon input.field,
.ha-v3-register-card .prepend-icon .form-control { padding-left: 43px; }

.ha-v3-register-card input.field:focus,
.ha-v3-register-card select.field:focus,
.ha-v3-register-card textarea.field:focus,
.ha-v3-register-card .form-control:focus {
    background: var(--ha3-surface-solid);
    border-color: rgba(54, 127, 245, .48);
    box-shadow: 0 0 0 4px rgba(54, 127, 245, .08), 0 9px 24px rgba(36, 84, 160, .05);
}

body.ha-v3-register #registration .ha-v3-register-card input.field,
body.ha-v3-register #registration .ha-v3-register-card select.field,
body.ha-v3-register #registration .ha-v3-register-card textarea.field,
body.ha-v3-register #registration .ha-v3-register-card .form-control,
body.ha-v3-register #registration .ha-v3-register-card .intl-tel-input input {
    color: var(--ha3-ink) !important;
    background-color: var(--ha3-surface-soft) !important;
    border-color: var(--ha3-line) !important;
}

body.ha-v3-register #registration .ha-v3-register-card input.field:focus,
body.ha-v3-register #registration .ha-v3-register-card select.field:focus,
body.ha-v3-register #registration .ha-v3-register-card textarea.field:focus,
body.ha-v3-register #registration .ha-v3-register-card .form-control:focus,
body.ha-v3-register #registration .ha-v3-register-card .intl-tel-input input:focus {
    color: var(--ha3-ink) !important;
    background-color: var(--ha3-surface-solid) !important;
    border-color: rgba(54, 127, 245, .48) !important;
}

body.ha-v3-register #registration .ha-v3-register-card input.field::placeholder,
body.ha-v3-register #registration .ha-v3-register-card textarea.field::placeholder,
body.ha-v3-register #registration .ha-v3-register-card .form-control::placeholder {
    color: var(--ha3-muted) !important;
    opacity: .72;
}

.ha-v3-register-card .field-icon {
    z-index: 2;
    top: 0;
    left: 0;
    width: 42px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ha3-muted);
    background: transparent;
    border: 0;
    font-size: 9px;
}

.ha-v3-register-card .intl-tel-input { width: 100%; }
.ha-v3-register-card .intl-tel-input input { height: 50px; background: var(--ha3-surface-soft); border-color: var(--ha3-line); border-radius: 13px; font-size: 9px; }
.ha-v3-register-card .intl-tel-input .selected-flag { border-radius: 13px 0 0 13px; }
.ha-v3-register-card .intl-tel-input .country-list { z-index: 20; color: #17243a; background: #fff; border-color: rgba(106, 125, 156, .18); border-radius: 12px; box-shadow: var(--ha3-shadow-lg); }

.ha-v3-register-card .generate-password {
    width: 100%;
    height: 42px;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .07);
    border: 1px solid rgba(54, 127, 245, .12);
    border-radius: 11px;
    font-size: 8px;
    font-weight: 750;
}

.ha-v3-register-card .password-strength-meter { padding-top: 4px; }
.ha-v3-register-card .password-strength-meter .progress { height: 6px; overflow: hidden; background: var(--ha3-surface-soft); border-radius: 999px; }
.ha-v3-register-card #passwordStrengthTextLabel { margin: 8px 0 0; font-size: 7px; }

.ha-v3-register-card .bootstrap-switch {
    border-color: var(--ha3-line);
    border-radius: 11px;
    box-shadow: none;
}

.ha-v3-register-card p { color: var(--ha3-copy); font-size: 8px; line-height: 1.65; }

body.ha-v3-register #frmCheckout > .text-center.row {
    margin: 4px 0 16px;
    padding: 19px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 18px;
    box-shadow: var(--ha3-shadow-xs);
}

body.ha-v3-register #frmCheckout > p.text-center {
    margin: 0 0 12px;
}

body.ha-v3-register #frmCheckout > p.text-center .form-check {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 20px;
    gap: 9px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 14px;
    box-shadow: var(--ha3-shadow-xs);
    font-size: 8px;
}

body.ha-v3-register #frmCheckout > p.text-center .form-check-input {
    position: static;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--ha3-blue-text);
}

body.ha-v3-register #frmCheckout > p.text-center .form-check a { color: var(--ha3-blue-text); font-weight: 740; }

body.ha-v3-register .ha-v3-register-submit {
    width: min(100%, 390px);
    height: 54px;
    margin-top: 3px;
    color: #fff;
    background: linear-gradient(110deg, #367ff5, #665df4) !important;
    border: 0 !important;
    border-radius: 15px;
    box-shadow: 0 15px 34px rgba(62, 105, 239, .27);
    font-size: 9px;
    font-weight: 790;
    transition: transform .18s ease, box-shadow .18s ease;
}

body.ha-v3-register .ha-v3-register-submit:hover,
body.ha-v3-register .ha-v3-register-submit:focus {
    color: #fff;
    box-shadow: 0 19px 42px rgba(62, 105, 239, .36);
    transform: translateY(-1px);
}

body.ha-v3-register .footer {
    margin: 0;
    padding: 25px 0 30px;
    background: transparent;
    border-top: 1px solid var(--ha3-line);
}

body.ha-v3-register .footer > .container { padding-left: 15px; }

/* Mobile application dock */

.ha-v3-mobile-dock {
    display: none;
}

@media (max-width: 1199.98px) {
    .ha-v3-register-shell { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
    .ha-v3-register-story { padding: 27px 24px 24px; }
    .ha-v3-register-copy h1 { font-size: 33px; }
    .ha-v3-register-card > .card-body { padding: 25px 26px !important; }

    .ha-v3-auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
        min-height: 610px;
    }

    .ha-v3-auth-story { padding: 36px 34px 32px; }
    .ha-v3-auth-main { padding: 38px 42px; }
    .ha-v3-auth-story-copy h1 { font-size: 43px; }
    .ha-v3-auth-benefits { gap: 10px; }

    .ha-v3-command-trigger {
        width: 42px;
        min-width: 42px;
        justify-content: center;
        padding: 0;
    }

    .ha-v3-command-trigger span,
    .ha-v3-command-trigger kbd {
        display: none;
    }

    .ha-v3-workspace {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .ha-v3-update-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ha-v3-security-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ha-v3-rail-tools {
        display: grid;
        margin: 0 0 10px;
        padding: 0 2px 10px;
        gap: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .ha-v3-rail-tool {
        min-height: 45px;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        padding: 5px 9px;
        gap: 8px;
        color: rgba(218, 226, 239, .72);
        background: rgba(255, 255, 255, .045);
        border: 1px solid rgba(255, 255, 255, .055);
        border-radius: 13px;
        font-size: 10px;
        font-weight: 690;
        text-align: left;
    }

    .ha-v3-rail-tool > i:first-child {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #7dd9f7;
        background: rgba(33, 184, 232, .1);
        border-radius: 10px;
    }

    .ha-v3-rail-tool kbd {
        padding: 3px 5px;
        color: rgba(255, 255, 255, .48);
        background: rgba(255, 255, 255, .055);
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 6px;
        font-family: inherit;
        font-size: 7px;
    }
}

@media (max-width: 991.98px) {
    body.ha-v3-register #main-body { padding: 26px 0 38px; }

    .ha-v3-register-shell {
        max-width: 760px;
        grid-template-columns: 1fr;
        margin: 0 auto;
    }

    .ha-v3-register-story {
        position: relative;
        top: auto;
        min-height: 0;
        padding: 29px;
    }

    .ha-v3-register-copy { margin: 30px 0 24px; }
    .ha-v3-register-copy h1 { margin: 12px 0 9px; font-size: 34px; }
    .ha-v3-register-copy p { max-width: 580px; }
    .ha-v3-register-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .ha-v3-register-steps a { grid-template-columns: 30px minmax(0, 1fr); padding: 9px; }
    .ha-v3-register-steps a > span { width: 30px; height: 30px; }
    .ha-v3-register-steps a > i,
    .ha-v3-register-steps small { display: none; }
    .ha-v3-register-progress { margin-top: 23px; padding-top: 0; }
    .ha-v3-register-story-foot { display: none; }

    body.ha-v3-login #main-body { padding: 26px 0 34px; }

    .ha-v3-auth-shell {
        max-width: 720px;
        grid-template-columns: 1fr;
        margin: 0 auto;
        border-radius: 26px;
    }

    .ha-v3-auth-story {
        min-height: 248px;
        padding: 30px 34px;
    }

    .ha-v3-auth-story-copy {
        max-width: 590px;
        margin: 30px 0 0;
    }

    .ha-v3-auth-story-copy h1 { margin: 13px 0 10px; font-size: 36px; }
    .ha-v3-auth-story-copy > p { max-width: 540px; font-size: 9px; }
    .ha-v3-auth-benefits,
    .ha-v3-auth-story-foot { display: none; }
    .ha-v3-auth-main { padding: 42px 54px 46px; }

    .ha-v3-workspace {
        grid-template-columns: 1fr;
    }

    .ha-v3-next-action {
        min-height: 220px;
    }

    .ha-v3-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dataTables_wrapper.ha-view-cards table.dataTable tbody {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body.ha-v3-register { padding-bottom: 0 !important; }
    body.ha-v3-register #main-body { padding: 16px 0 28px; }
    body.ha-v3-register .header .navbar-light > .container { padding-right: 12px; padding-left: 12px; }
    body.ha-v3-register #main-body > .container { padding-right: 12px; padding-left: 12px; }
    body.ha-v3-register .footer { padding-bottom: 26px !important; }

    .ha-v3-register-story { padding: 24px 22px; border-radius: 22px; }
    .ha-v3-register-copy { margin: 24px 0 20px; }
    .ha-v3-register-copy h1 { font-size: 30px; }
    .ha-v3-register-copy p { display: none; }
    .ha-v3-register-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v3-register-intro { padding: 23px 21px; border-radius: 18px; }
    .ha-v3-register-intro h2 { font-size: 25px; }
    .ha-v3-register-card { border-radius: 18px; }
    .ha-v3-register-card > .card-body { padding: 22px 20px !important; }
    .ha-v3-register-heading { margin-bottom: 20px; }
    .ha-v3-register-heading:not(:first-child) { margin-top: 24px; padding-top: 23px; }
    body.ha-v3-register #frmCheckout > .text-center.row { padding: 15px 8px; }

    body.ha-v3-login { padding-bottom: 0 !important; }
    body.ha-v3-login #main-body { min-height: 0; padding: 16px 0 26px; }
    body.ha-v3-login .header .navbar-light > .container { padding-right: 12px; padding-left: 12px; }
    body.ha-v3-login #main-body > .container { padding-right: 12px; padding-left: 12px; }
    body.ha-v3-login .footer { padding-bottom: 26px !important; }

    .ha-v3-auth-shell {
        border-radius: 22px;
        box-shadow: 0 22px 70px rgba(18, 38, 70, .13);
    }

    .ha-v3-auth-story {
        min-height: 190px;
        padding: 23px 24px;
    }

    .ha-v3-auth-story-top small { display: none; }
    .ha-v3-auth-shield { width: 39px; height: 39px; border-radius: 12px; }
    .ha-v3-auth-story-copy { margin: 23px 0 0; }
    .ha-v3-auth-eyebrow { font-size: 7px; }
    .ha-v3-auth-story-copy h1 { margin: 10px 0 0; font-size: 31px; }
    .ha-v3-auth-story-copy > p { display: none; }
    .ha-v3-auth-main { padding: 32px 25px 35px; }
    .ha-v3-auth-main .card-body h6 { font-size: 25px; }

    body.ha-v3-ready {
        padding-bottom: 82px;
    }

    body.ha-v3-ready .footer {
        padding-bottom: 92px;
    }

    .ha-v3-mobile-dock {
        position: fixed;
        z-index: 1050;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 10px;
        height: 64px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        padding: 6px;
        color: var(--ha3-copy);
        background: color-mix(in srgb, var(--ha3-surface-solid) 93%, transparent);
        border: 1px solid var(--ha3-line);
        border-radius: 19px;
        box-shadow: 0 22px 65px rgba(10, 24, 46, .22);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }

    .ha-v3-dock-item {
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--ha3-muted);
        border-radius: 14px;
        font-size: 7px;
        font-weight: 720;
        text-decoration: none !important;
    }

    .ha-v3-dock-item i { font-size: 13px; }
    .ha-v3-dock-item.is-active { color: var(--ha3-blue-text); background: rgba(54, 127, 245, .08); }

    .ha-v3-page-hero {
        min-height: 118px;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 18px;
        gap: 13px;
    }

    .ha-v3-page-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
    .ha-v3-page-copy h1 { font-size: 23px; }
    .ha-v3-page-copy p { font-size: 9px; line-height: 1.45; }
    .ha-v3-page-tools { grid-column: 1 / -1; }
    .ha-v3-page-action { width: 100%; justify-content: center; }

    .ha-v3-workspace-main,
    .ha-v3-updates {
        padding: 18px;
    }

    .ha-v3-section-heading {
        align-items: flex-start;
    }

    .ha-v3-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ha-v3-health-item {
        min-height: 74px;
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 8px;
    }

    .ha-v3-health-item > i { display: none; }
    .ha-v3-health-icon { width: 32px; height: 32px; }

    .ha-v3-hero-signal { display: none; }

    .ha-v3-update-list {
        grid-template-columns: 1fr;
    }

    .ha-v3-list-toolbar {
        align-items: flex-start;
    }

    .ha-v3-list-summary small { display: none; }
    .ha-v3-view-switch { display: none; }

    body.ha-v3-list-page .dataTables_wrapper > .listtable {
        overflow: visible;
    }

    body.ha-v3-list-page table.dataTable,
    body.ha-v3-list-page table.dataTable tbody,
    body.ha-v3-list-page table.dataTable tr,
    body.ha-v3-list-page table.dataTable td {
        display: block !important;
        width: 100% !important;
    }

    body.ha-v3-list-page table.dataTable thead { display: none; }
    body.ha-v3-list-page table.dataTable tbody { display: grid !important; padding: 10px; gap: 10px; background: var(--ha3-surface-soft); }
    body.ha-v3-list-page table.dataTable tr.ha-v3-record { position: relative; min-width: 0; padding: 12px 13px 9px; overflow: hidden; background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 15px; box-shadow: var(--ha3-shadow-xs); }
    body.ha-v3-list-page table.dataTable tr.ha-v3-record::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--ha3-blue), var(--ha3-violet)); }
    body.ha-v3-list-page table.dataTable tr.ha-v3-record td { min-height: 38px; height: auto; display: grid !important; grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr); align-items: center; padding: 8px 2px; gap: 9px; background: transparent !important; border: 0; border-bottom: 1px solid var(--ha3-line); text-align: right !important; white-space: normal; }
    body.ha-v3-list-page table.dataTable tr.ha-v3-record td:last-child { border-bottom: 0; }
    body.ha-v3-list-page table.dataTable td::before { color: var(--ha3-muted); content: attr(data-label); font-size: 7px; font-weight: 820; letter-spacing: .04em; text-align: left; text-transform: uppercase; }

    /* Keep WHMCS' domain bulk actions and DataTables pagination inside the
       mobile canvas. The native controls remain fully functional. */
    body.ha-v3-list-domains .btn-group.btn-group-sm.mb-3 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.ha-v3-list-domains .btn-group.btn-group-sm.mb-3 > .btn,
    body.ha-v3-list-domains .btn-group.btn-group-sm.mb-3 > .btn-group {
        min-width: 0;
        flex: 1 1 140px;
        margin: 0;
    }

    body.ha-v3-list-domains .btn-group.btn-group-sm.mb-3 > .btn-group > .btn {
        width: 100%;
    }

    body.ha-v3-list-page .dataTables_paginate {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.ha-v3-list-page .dataTables_paginate::-webkit-scrollbar { display: none; }
    body.ha-v3-list-page .dataTables_paginate .pagination {
        width: max-content;
        min-width: 100%;
        justify-content: center;
        margin: 0;
    }

    .ha-v3-security-overview {
        grid-template-columns: 1fr;
    }

    .ha-v3-security-card {
        min-height: 118px;
    }

    .ha-v3-command-layer {
        place-items: end center;
        padding: 12px;
    }

    .ha-v3-command {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 22px;
    }

    .ha-v3-command-results { max-height: calc(100vh - 150px); }
    .ha-v3-command footer strong { display: none; }
    .ha-v3-toast-region { right: 10px; bottom: 85px; left: 10px; }
    .ha-v3-toast { min-width: 0; width: 100%; }
}

@media (max-width: 575.98px) {
    body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup {
        width: 39px;
        min-width: 39px;
        padding: 0;
    }

    body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup span { display: none; }
    body:is(.ha-v3-login, .ha-v3-register) .ha-top-panel { gap: 5px; }
    body:is(.ha-v3-login, .ha-v3-register) .ha-v3-theme-toggle,
    body:is(.ha-v3-login, .ha-v3-register) .ha-top-language { display: inline-flex !important; }
    .ha-v3-register-brand small { display: none; }
    .ha-v3-register-progress { margin-top: 18px; }
    .ha-v3-register-heading-copy strong { font-size: 11px; }
    .ha-v3-register-heading-copy small { max-width: 220px; line-height: 1.4; }
    body.ha-v3-register #frmCheckout > p.text-center .form-check { width: 100%; padding: 12px 14px; line-height: 1.5; }
    .ha-v3-auth-assurance { margin-top: 15px; }

    .ha-v3-command-trigger {
        display: none;
    }

    body.ha-client-shell .ha-v3-theme-toggle {
        display: none;
    }

    .ha-v3-section-heading h2 { font-size: 15px; }
    .ha-v3-section-heading > a { max-width: 120px; text-align: right; }
}

/* Accessible responsive typography scale — 1.3.0
   Minimums follow common enterprise/SaaS UI practice: 14px body and controls,
   12px supporting copy, and 11px reserved only for uppercase micro-labels. */

body.ha-v3-ready {
    --ha-type-body: clamp(14px, .78vw, 16px);
    --ha-type-ui: clamp(13px, .7vw, 15px);
    --ha-type-small: clamp(12px, .64vw, 13px);
    --ha-type-label: clamp(11px, .58vw, 12px);
    --ha-type-card-title: clamp(14px, .76vw, 16px);
    --ha-type-section: clamp(20px, 1.15vw, 24px);
    font-size: var(--ha-type-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.ha-v3-ready .primary-content,
body.ha-v3-ready .card-body,
body.ha-v3-ready .panel-body,
body.ha-v3-ready .alert,
body.ha-v3-ready .list-group-item {
    font-size: var(--ha-type-body);
    line-height: 1.55;
}

body.ha-v3-ready .primary-content .form-control,
body.ha-v3-ready .primary-content select,
body.ha-v3-ready .primary-content textarea,
body.ha-v3-ready .primary-content .btn:not(.btn-icon) {
    font-size: var(--ha-type-ui);
}

body.ha-v3-ready .primary-content label,
body.ha-v3-ready .primary-content small,
body.ha-v3-ready .primary-content .text-muted {
    font-size: var(--ha-type-small);
    line-height: 1.5;
}

/* Application header and rail */

.ha-v3-command-trigger { font-size: var(--ha-type-ui); }
.ha-v3-command-trigger kbd { font-size: var(--ha-type-label); }
.ha-top-account-copy small { font-size: var(--ha-type-label); }
.ha-top-account-copy strong { font-size: var(--ha-type-card-title); }
.ha-top-account-chevron { font-size: 11px; }
.ha-top-menu-heading span { font-size: 15px; }
.ha-top-menu-heading small,
.ha-top-quick-heading small,
.ha-top-quick-link small,
.ha-top-email-copy small { font-size: 12px; }
body.ha-premium-ready .ha-top-account-menu > .dropdown-item > a,
.ha-top-quick-heading strong,
.ha-top-quick-link strong,
.ha-top-email-copy strong,
.ha-top-quick-footer { font-size: 13px; }
.ha-top-email-empty { font-size: 13px; }
.ha-top-badge,
.ha-top-cart .badge { font-size: 10px; }

.ha-rail-brand { font-size: 14px; }
.ha-rail-link { min-height: 54px; font-size: 14px; }
.ha-rail-submenu a { min-height: 38px; display: flex; align-items: center; font-size: 13px; }
.ha-rail-account strong { font-size: 13px; }
.ha-rail-account small { font-size: 11px; }
.ha-v3-rail-tool { font-size: 13px; }
.ha-v3-rail-tool kbd { font-size: 10px; }

@media (min-width: 1200px) {
    body.ha-rail-footer-near .ha-side-rail {
        bottom: auto;
        height: var(--ha-rail-safe-height, calc(100vh - 32px));
        min-height: 160px;
        border-color: rgba(120, 150, 198, .19);
        box-shadow: 0 18px 55px rgba(7, 17, 31, .25), 0 0 0 1px rgba(255, 255, 255, .025) inset;
        transition: width .24s ease, top .24s ease, height .24s ease, box-shadow .24s ease;
    }

    body.ha-rail-footer-near .ha-side-rail::after {
        position: absolute;
        right: 16px;
        bottom: 5px;
        left: 16px;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, rgba(38, 185, 235, .28), transparent);
        pointer-events: none;
    }

    body.ha-rail-footer-near .ha-rail-scroll {
        scrollbar-color: rgba(123, 216, 255, .28) transparent;
    }
}

/* Dashboard hero and metrics */

.ha-hero-eyebrow { font-size: 12px; }
.ha-dashboard-hero h1 { font-size: clamp(38px, 3.3vw, 56px); }
.ha-dashboard-hero p { font-size: clamp(15px, .85vw, 17px); line-height: 1.65; }
.ha-hero-actions .btn { min-height: 48px; font-size: 14px; }
.ha-trust-copy span { font-size: 11px; }
.ha-trust-copy strong { font-size: 15px; }
.ha-trust-features { font-size: 11px; }
.ha-v3-hero-signal strong { font-size: 12px; }
.ha-v3-hero-signal small { font-size: 11px; }

body.ha-dashboard .tiles .tile { min-height: 156px; }
body.ha-dashboard .tiles .tile .stat { font-size: clamp(34px, 2vw, 40px); }
body.ha-dashboard .tiles .tile .title { font-size: 12px; }
body.ha-dashboard .tiles .ha-credit-value { font-size: clamp(20px, 1.3vw, 26px); }
body.ha-dashboard .tiles .ha-credit-action { font-size: 11px; }
body.ha-dashboard .tiles .ha-credit-action i { font-size: 10px; }

.ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.ha-v3-workspace-main,
.ha-v3-updates { padding: 26px; }
.ha-v3-section-heading { margin-bottom: 20px; }
.ha-v3-section-heading span { font-size: var(--ha-type-label); }
.ha-v3-section-heading h2 { font-size: var(--ha-type-section); }
.ha-v3-section-heading > a,
.ha-v3-text-button { font-size: var(--ha-type-small); }

.ha-v3-health-grid { gap: 12px; }
.ha-v3-health-item {
    min-height: 88px;
    grid-template-columns: 42px minmax(0, 1fr) 12px;
    padding: 13px 14px;
    gap: 11px;
}
.ha-v3-health-icon { width: 42px; height: 42px; font-size: 14px; }
.ha-v3-health-item small { margin-bottom: 4px; font-size: var(--ha-type-label); }
.ha-v3-health-item strong {
    overflow: visible;
    font-size: var(--ha-type-card-title);
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}
.ha-v3-health-item > i { font-size: 11px; }

.ha-v3-next-action { padding: 28px; }
.ha-v3-next-eyebrow { font-size: var(--ha-type-label); }
.ha-v3-next-icon { width: 50px; height: 50px; }
.ha-v3-next-action h3 { font-size: clamp(18px, 1vw, 21px); line-height: 1.3; }
.ha-v3-next-action p { font-size: var(--ha-type-ui); line-height: 1.6; }
.ha-v3-next-action .btn { min-height: 43px; padding: 0 16px; font-size: var(--ha-type-small); }

.ha-v3-update-list { gap: 12px; }
.ha-v3-update-item {
    min-height: 82px;
    grid-template-columns: 40px minmax(0, 1fr) 12px;
    padding: 12px 13px;
    gap: 11px;
}
.ha-v3-update-icon { width: 40px; height: 40px; font-size: 14px; }
.ha-v3-update-item strong {
    overflow: visible;
    font-size: var(--ha-type-card-title);
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}
.ha-v3-update-item small { font-size: var(--ha-type-label); }
.ha-v3-update-item > i { font-size: 11px; }

/* Page headings, tables and cards */

.ha-v3-page-copy > span { font-size: var(--ha-type-label); }
.ha-v3-page-copy h1 { font-size: clamp(28px, 2.2vw, 38px); }
.ha-v3-page-copy p { font-size: var(--ha-type-body); line-height: 1.55; }
.ha-v3-page-action { min-height: 46px; font-size: var(--ha-type-ui); }
.ha-v3-list-summary strong { font-size: var(--ha-type-card-title); }
.ha-v3-list-summary small { font-size: var(--ha-type-small); }
.ha-v3-view-switch button { font-size: 13px; }
body.ha-v3-list-page .dataTables_filter label::before { font-size: 13px; }
body.ha-v3-list-page .dataTables_filter input { height: 46px; font-size: var(--ha-type-ui); }
body.ha-v3-list-page .dataTables_info { font-size: var(--ha-type-small); }
body.ha-v3-list-page table.dataTable thead th { height: 54px; font-size: var(--ha-type-label); }
body.ha-v3-list-page table.dataTable tbody td { height: 70px; font-size: var(--ha-type-ui); line-height: 1.45; }
.dataTables_wrapper.ha-view-cards table.dataTable td::before { font-size: var(--ha-type-label); }
.ha-v3-security-card small { font-size: var(--ha-type-label); }
.ha-v3-security-card strong { font-size: var(--ha-type-card-title); }
.ha-v3-security-card > i { font-size: 12px; }
.ha-v3-toast strong { font-size: 14px; }
.ha-v3-toast small { font-size: 12px; }

/* Login typography */

body:is(.ha-v3-login, .ha-v3-register) .ha-v3-auth-signup { font-size: 13px; }
.ha-v3-auth-story-top strong { font-size: 16px; }
.ha-v3-auth-story-top small { font-size: 11px; }
.ha-v3-auth-eyebrow { font-size: 11px; }
.ha-v3-auth-story-copy > p { font-size: 15px; }
.ha-v3-auth-benefits b { font-size: 12px; }
.ha-v3-auth-benefits small { font-size: 10px; }
.ha-v3-auth-story-foot { font-size: 11px; }
.ha-v3-auth-story-foot small { font-size: 10px; }
.ha-v3-auth-card-badge { font-size: 11px; }
.ha-v3-auth-main .card-body h6 { font-size: clamp(30px, 2vw, 36px); }
.ha-v3-auth-main .card-body > .mb-4 p { font-size: 14px; }
.ha-v3-auth-main .form-control-label,
.ha-v3-auth-main .form-group label,
.ha-v3-auth-main .form-group .small.text-muted { font-size: 13px; }
body.ha-v3-login .ha-v3-auth-main .form-control-label,
body.ha-v3-login .ha-v3-auth-main .form-group label,
body.ha-v3-login .ha-v3-auth-main .form-group .small.text-muted { font-size: 13px !important; }
body.ha-v3-login .ha-v3-auth-main .input-group .form-control { font-size: 14px !important; }
.ha-v3-auth-main .ha-v3-auth-options label { font-size: 13px; }
.ha-v3-auth-main #login { font-size: 14px; }
.ha-v3-auth-main .card-footer small,
.ha-v3-auth-main .card-footer a { font-size: 13px; }
.ha-v3-auth-assurance strong { font-size: 12px; }
.ha-v3-auth-assurance small { font-size: 11px; }

/* Registration typography */

.ha-v3-register-shell { grid-template-columns: 360px minmax(0, 1fr); }
.ha-v3-register-brand strong { font-size: 15px; }
.ha-v3-register-brand small { font-size: 11px; }
.ha-v3-register-eyebrow { font-size: 11px; }
.ha-v3-register-copy h1 { font-size: clamp(38px, 2.6vw, 46px); }
.ha-v3-register-copy p { font-size: 14px; }
.ha-v3-register-steps a > span { font-size: 11px; }
.ha-v3-register-steps b { font-size: 12px; }
.ha-v3-register-steps small { font-size: 10px; }
.ha-v3-register-steps a > i { font-size: 11px; }
.ha-v3-register-progress strong { font-size: 13px; }
.ha-v3-register-progress small,
.ha-v3-register-story-foot { font-size: 11px; }
.ha-v3-register-intro > span { font-size: 11px; }
.ha-v3-register-intro h2 { font-size: clamp(28px, 1.8vw, 34px); }
.ha-v3-register-intro p { font-size: 14px; }
.ha-v3-register-heading-copy strong { font-size: 16px; }
.ha-v3-register-heading-copy small { font-size: 12px; }
.ha-v3-register-card input.field,
.ha-v3-register-card select.field,
.ha-v3-register-card textarea.field,
.ha-v3-register-card .form-control,
.ha-v3-register-card .intl-tel-input input { font-size: 14px; }
.ha-v3-register-card .generate-password { font-size: 13px; }
.ha-v3-register-card #passwordStrengthTextLabel,
.ha-v3-register-card p { font-size: 12px; }
body.ha-v3-register #frmCheckout > p.text-center .form-check { font-size: 13px; }
body.ha-v3-register #registration .ha-v3-register-card input.field,
body.ha-v3-register #registration .ha-v3-register-card select.field,
body.ha-v3-register #registration .ha-v3-register-card textarea.field,
body.ha-v3-register #registration .ha-v3-register-card .form-control,
body.ha-v3-register #registration .ha-v3-register-card .intl-tel-input input,
body.ha-v3-register .ha-v3-register-submit { font-size: 14px !important; }

@media (max-width: 1199.98px) {
    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 290px; }
    .ha-v3-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v3-register-shell { grid-template-columns: 320px minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .ha-v3-workspace,
    .ha-v3-register-shell { grid-template-columns: 1fr; }
    .ha-v3-register-steps b { font-size: 11px; }
}

@media (max-width: 767.98px) {
    body.ha-v3-ready {
        --ha-type-body: 15px;
        --ha-type-ui: 14px;
        --ha-type-small: 12px;
        --ha-type-label: 11px;
        --ha-type-card-title: 14px;
        --ha-type-section: 20px;
    }

    .ha-v3-health-item { min-height: 82px; grid-template-columns: 34px minmax(0, 1fr); padding: 11px; }
    .ha-v3-health-icon { width: 34px; height: 34px; font-size: 12px; }
    .ha-v3-update-item { min-height: 78px; }
    .ha-v3-dock-item { font-size: 10px; }
    .ha-v3-dock-item i { font-size: 15px; }
    .ha-v3-page-copy h1 { font-size: 26px; }
    .ha-v3-page-copy p { font-size: 14px; }
    body.ha-v3-list-page table.dataTable tr.ha-v3-record td { min-height: 44px; font-size: 13px; }
    body.ha-v3-list-page table.dataTable td::before { font-size: 11px; }
    .ha-v3-register-copy h1 { font-size: 32px; }
    .ha-v3-register-intro h2 { font-size: 27px; }
}

@media (max-width: 575.98px) {
    .ha-v3-health-grid { grid-template-columns: 1fr; }
    .ha-v3-update-list { grid-template-columns: 1fr; }
    .ha-v3-health-item { min-height: 78px; }
    .ha-v3-update-item { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .ha-v3-command,
    .ha-v3-toast,
    .ha-v3-health-item,
    .ha-v3-command-item {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .ha-v3-command-trigger,
    .ha-v3-theme-toggle,
    .ha-v3-mobile-dock,
    .ha-v3-page-tools,
    .ha-v3-view-switch,
    .ha-v3-toast-region {
        display: none !important;
    }
}

/* Premium Product Details workspace */

.ha-v4-service-experience {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
    margin: 20px 0 22px;
    gap: 16px;
}

.ha-v4-service-summary,
.ha-v4-credentials {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ha3-line);
    border-radius: 24px;
    box-shadow: var(--ha3-shadow-sm);
}

.ha-v4-service-summary {
    position: relative;
    padding: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 5%, rgba(78, 150, 255, .3), transparent 19rem),
        radial-gradient(circle at 5% 100%, rgba(119, 91, 247, .24), transparent 20rem),
        linear-gradient(145deg, #07162a 0%, #102b51 55%, #152d62 100%);
    border-color: rgba(122, 165, 228, .2);
    box-shadow: 0 24px 62px rgba(15, 40, 80, .2);
}

.ha-v4-service-summary::after {
    position: absolute;
    width: 210px;
    height: 210px;
    right: -90px;
    bottom: -110px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 68px rgba(255, 255, 255, .018);
    pointer-events: none;
}

.ha-v4-service-summary-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
}

.ha-v4-service-orb {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #318bff, #745bfa);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    box-shadow: 0 16px 35px rgba(33, 104, 242, .35), inset 0 1px 0 rgba(255, 255, 255, .24);
    font-size: 19px;
}

.ha-v4-service-identity > span,
.ha-v4-credentials header > div > span {
    display: block;
    margin-bottom: 4px;
    color: #73cfff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ha-v4-service-identity h2,
.ha-v4-credentials h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(22px, 1.6vw, 29px);
    font-weight: 780;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.ha-v4-service-identity p {
    max-width: 100%;
    overflow: hidden;
    margin: 5px 0 0;
    color: rgba(226, 238, 255, .7);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-v4-service-status {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    gap: 7px;
    color: #c8d4e7;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 760;
    backdrop-filter: blur(10px);
}

.ha-v4-service-status i {
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

.ha-v4-service-status.is-active { color: #59e3b1; }

.ha-v4-service-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 25px;
    padding: 14px;
    gap: 8px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 17px;
    backdrop-filter: blur(10px);
}

.ha-v4-service-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    padding: 8px 9px;
    gap: 9px;
}

.ha-v4-service-metric > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #8cc9ff;
    background: rgba(95, 154, 255, .13);
    border-radius: 11px;
    font-size: 12px;
}

.ha-v4-service-metric small,
.ha-v4-credential-copy small {
    display: block;
    margin-bottom: 3px;
    color: rgba(211, 225, 246, .58) !important;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.ha-v4-service-metric strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 710;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-v4-service-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    margin-top: 18px;
    gap: 9px;
}

.ha-v4-service-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    gap: 8px;
    color: #e7f0ff !important;
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 730;
    box-shadow: none !important;
}

.ha-v4-service-action:hover,
.ha-v4-service-action:focus { background: rgba(255, 255, 255, .13) !important; transform: translateY(-1px); }
.ha-v4-service-action.is-primary { color: #0e315c !important; background: #fff !important; }

.ha-v4-credentials {
    padding: 24px;
    color: var(--ha3-ink);
    background: radial-gradient(circle at 100% 0, rgba(33, 184, 232, .09), transparent 17rem),
        var(--ha3-surface-solid);
}

.ha-v4-credentials header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 14px;
}

.ha-v4-credentials header > div > span { color: var(--ha3-blue-text); }
.ha-v4-credentials h2 { color: var(--ha3-ink); font-size: 21px; }

.ha-v4-secure-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 9px;
    gap: 6px;
    color: var(--ha3-green-text);
    background: rgba(24, 183, 132, .08);
    border: 1px solid rgba(24, 183, 132, .15);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 780;
    white-space: nowrap;
}

.ha-v4-credential-list { display: grid; gap: 8px; }

.ha-v4-credential-row {
    min-width: 0;
    min-height: 61px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 9px 9px 11px;
    gap: 10px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 83%, transparent);
    border: 1px solid var(--ha3-line);
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ha-v4-credential-row:hover {
    border-color: color-mix(in srgb, var(--ha3-blue) 28%, var(--ha3-line));
    box-shadow: var(--ha3-shadow-xs);
    transform: translateY(-1px);
}

.ha-v4-credential-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--ha3-blue-text);
    background: rgba(54, 127, 245, .09);
    border-radius: 11px;
    font-size: 13px;
}

.ha-v4-credential-copy { min-width: 0; }
.ha-v4-credential-copy small { color: var(--ha3-muted) !important; }
.ha-v4-credential-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ha3-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 720;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-v4-credential-row.is-secret .ha-v4-credential-copy strong { letter-spacing: .13em; }
.ha-v4-credential-row.is-secret.is-revealed .ha-v4-credential-copy strong { letter-spacing: .01em; }
.ha-v4-credential-actions { display: flex; align-items: center; gap: 5px; }

.ha-v4-credential-button {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    gap: 6px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 760;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.ha-v4-credential-button:hover,
.ha-v4-credential-button:focus {
    color: var(--ha3-blue-text);
    border-color: rgba(54, 127, 245, .28);
    transform: translateY(-1px);
}

.ha-v4-credential-button.is-icon { padding: 0; }
.ha-v4-credential-button.is-copied { color: #fff; background: var(--ha3-green-text); border-color: var(--ha3-green-text); }

.ha-v4-credentials-note {
    display: flex;
    align-items: flex-start;
    margin: 13px 2px 0;
    gap: 7px;
    color: var(--ha3-muted);
    font-size: 10px;
    line-height: 1.5;
}

.ha-v4-credentials-note i { margin-top: 2px; color: var(--ha3-green-text); }
.ha-v4-credentials-empty { display: flex; padding: 16px; gap: 9px; color: var(--ha3-copy); background: var(--ha3-surface-soft); border-radius: 13px; font-size: 12px; }

.ha-v4-copy-fallback {
    position: fixed;
    width: 1px;
    height: 1px;
    left: -9999px;
    top: -9999px;
    opacity: 0;
}

.ha-v4-service-tabs {
    margin-top: 20px;
    padding: 6px;
    gap: 5px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line) !important;
    border-radius: 15px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v4-service-tabs .nav-item { margin: 0 !important; }
.ha-v4-service-tabs .nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    gap: 6px;
    color: var(--ha3-copy);
    background: transparent;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 720;
}

.ha-v4-service-tabs .nav-link.active {
    color: var(--ha3-blue-text) !important;
    background: rgba(54, 127, 245, .09) !important;
}

.ha-v4-service-tab-content {
    margin-top: 10px;
    padding: 24px !important;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid) !important;
    border: 1px solid var(--ha3-line);
    border-radius: 18px;
    box-shadow: var(--ha3-shadow-xs);
}

.ha-v4-service-tab-content > .tab-pane > .row {
    min-height: 48px;
    align-items: center;
    margin: 0;
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v4-service-tab-content > .tab-pane > .row:last-of-type { border-bottom: 0; }

@media (max-width: 1199.98px) {
    .ha-v4-service-experience { grid-template-columns: 1fr; }
    .ha-v4-credential-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .ha-v4-service-experience { margin-top: 14px; gap: 12px; }
    .ha-v4-service-summary,
    .ha-v4-credentials { padding: 19px; border-radius: 19px; }
    .ha-v4-service-summary-top { grid-template-columns: 46px minmax(0, 1fr); }
    .ha-v4-service-orb { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; }
    .ha-v4-service-identity h2 { font-size: 21px; }
    .ha-v4-service-status { grid-column: 1 / -1; justify-self: start; }
    .ha-v4-service-metrics { grid-template-columns: 1fr; margin-top: 18px; }
    .ha-v4-service-metric { min-height: 48px; }
    .ha-v4-credential-list { grid-template-columns: 1fr; }
    .ha-v4-credentials header { align-items: center; }
    .ha-v4-credentials h2 { font-size: 19px; }
    .ha-v4-service-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ha-v4-service-tabs::-webkit-scrollbar { display: none; }
    .ha-v4-service-tabs .nav-link { white-space: nowrap; }
    .ha-v4-service-tab-content { padding: 16px !important; }
}

@media (max-width: 419.98px) {
    .ha-v4-credential-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-left: 8px; gap: 8px; }
    .ha-v4-credential-icon { width: 34px; height: 34px; }
    .ha-v4-credential-button.is-copy span { display: none; }
    .ha-v4-service-actions .ha-v4-service-action { width: 100%; }
    .ha-v4-secure-badge { padding: 6px 8px; }
}

/* Service control center — migrated from Hexa without a template fork */

.ha-v3-service-controls {
    margin: 22px 0;
    overflow: hidden;
    color: var(--ha3-ink);
    background: radial-gradient(circle at 100% 0, rgba(54, 127, 245, .1), transparent 20rem),
        var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: var(--ha3-radius-lg);
    box-shadow: var(--ha3-shadow-sm);
}

.ha-v3-service-controls-heading {
    min-height: 112px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    padding: 24px 26px;
    gap: 15px;
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v3-service-controls-icon,
.ha-v3-service-tool-head > span,
.ha-v3-server-identity-head > span {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--ha3-blue), var(--ha3-violet));
    box-shadow: 0 12px 28px rgba(54, 127, 245, .22);
}

.ha-v3-service-controls-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 17px;
}

.ha-v3-service-controls-heading > div > span,
.ha-v3-server-identity-head small {
    display: block;
    margin-bottom: 4px;
    color: var(--ha3-blue-text) !important;
    font-size: var(--ha-type-label, 11px);
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ha-v3-service-controls-heading h2,
.ha-v3-server-identity-head h3 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -.025em;
}

.ha-v3-service-controls-heading p,
.ha-v3-server-identity-head p {
    margin: 5px 0 0;
    color: var(--ha3-copy);
    font-size: var(--ha-type-small, 13px);
    line-height: 1.5;
}

.ha-v3-service-state {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    gap: 7px;
    color: var(--ha3-muted);
    background: var(--ha3-surface-soft);
    border: 1px solid var(--ha3-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.ha-v3-service-state i {
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.ha-v3-service-state.is-active { color: var(--ha3-green-text); }

.ha-v3-service-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    gap: 14px;
}

.ha-v3-service-tool {
    min-width: 0;
    padding: 20px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 74%, transparent);
    border: 1px solid var(--ha3-line);
    border-radius: 18px;
}

.ha-v3-service-tool:first-child:nth-last-child(3) {
    grid-column: 1 / -1;
}

.ha-v3-service-tool:first-child:nth-last-child(3) ~ .ha-v3-service-tool {
    grid-column: span 1;
}

.ha-v3-power-tool:only-child,
.ha-v3-ptr-tool:nth-child(odd):last-child {
    grid-column: 1 / -1;
}

.ha-v3-service-tool-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 17px;
    gap: 11px;
}

.ha-v3-service-tool-head > span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 14px;
}

.ha-v3-reinstall-tool .ha-v3-service-tool-head > span {
    background: linear-gradient(145deg, #f26b62, var(--ha3-red));
    box-shadow: 0 12px 28px rgba(239, 71, 85, .18);
}

.ha-v3-ptr-tool .ha-v3-service-tool-head > span {
    background: linear-gradient(145deg, var(--ha3-cyan), var(--ha3-blue));
}

.ha-v3-service-tool h3 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: 16px;
    font-weight: 760;
}

.ha-v3-service-tool p {
    margin: 4px 0 0;
    color: var(--ha3-copy);
    font-size: 12px;
    line-height: 1.45;
}

.ha-v3-power-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ha-v3-power-button,
.ha-v3-danger-action,
.ha-v3-primary-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 760;
}

.ha-v3-power-button {
    width: 100%;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
}

.ha-v3-power-button:hover,
.ha-v3-power-button:focus { transform: translateY(-1px); box-shadow: var(--ha3-shadow-xs); }
.ha-v3-power-button.is-restart i { color: var(--ha3-amber-text); }
.ha-v3-power-button.is-stop i { color: var(--ha3-red-text); }
.ha-v3-power-button.is-start i { color: var(--ha3-green-text); }

.ha-v3-service-note,
.ha-v3-service-form > small,
.ha-v3-hostname-hint {
    display: flex;
    align-items: center;
    margin-top: 11px;
    gap: 7px;
    color: var(--ha3-muted) !important;
    font-size: 12px;
    line-height: 1.45;
}

.ha-v3-service-form { display: grid; gap: 9px; }
.ha-v3-service-form label { margin: 0; color: var(--ha3-ink); font-size: 13px; font-weight: 720; }
.ha-v3-service-form .form-control { min-height: 46px; border-radius: 12px; font-size: 14px; }
.ha-v3-service-form > small { margin: -2px 0 3px; }
.ha-v3-danger-action { color: #fff; background: linear-gradient(135deg, var(--ha3-danger), var(--ha3-danger-2)); border: 0; }
.ha-v3-primary-action { color: #fff; background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2)); border: 0; }
.ha-v3-service-form .btn { justify-self: start; }

.ha-v3-service-alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 13px;
    gap: 9px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.ha-v3-service-alert i { margin-top: 3px; }
.ha-v3-service-alert.is-warning,
.ha-v3-service-alert.is-pending { color: #9b6715; background: rgba(236, 167, 44, .1); border-color: rgba(236, 167, 44, .2); }
.ha-v3-service-alert.is-success { margin-bottom: 12px; color: #087a57; background: rgba(24, 183, 132, .09); border-color: rgba(24, 183, 132, .2); }

/* Configure Product — clean equivalent of the Hexa server-field customization */

body.ha-v3-configure-ready .ha-v3-server-identity-head,
body.ha-v3-configure-ready .ha-v3-server-identity {
    max-width: 840px;
    margin-right: auto;
    margin-left: auto;
}

.ha-v3-server-identity-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    margin-top: 20px;
    padding: 21px 22px 15px;
    gap: 13px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.ha-v3-server-identity-head > span {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.ha-v3-server-identity-head h3 { font-size: 19px; }

body.ha-v3-configure-ready .ha-v3-server-identity {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    padding: 0 22px 21px;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: var(--ha3-shadow-xs);
}

body.ha-v3-configure-ready .ha-v3-server-identity > [class*="col-"] {
    max-width: 100%;
    flex: 0 0 100%;
}

body.ha-v3-configure-ready #inputHostname {
    min-height: 50px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 15px;
}

body.ha-v3-configure-ready label[for="inputHostname"] {
    margin-bottom: 8px;
    color: var(--ha3-ink);
    font-size: 13px;
    font-weight: 750;
}

@media (max-width: 767.98px) {
    .ha-v3-service-controls-heading { grid-template-columns: 42px minmax(0, 1fr); padding: 20px; }
    .ha-v3-service-controls-icon { width: 42px; height: 42px; border-radius: 13px; }
    .ha-v3-service-state { grid-column: 1 / -1; justify-self: start; }
    .ha-v3-service-controls-grid { grid-template-columns: 1fr; padding: 12px; }
    .ha-v3-service-tool,
    .ha-v3-service-tool:first-child:nth-last-child(3),
    .ha-v3-service-tool:first-child:nth-last-child(3) ~ .ha-v3-service-tool:last-child,
    .ha-v3-ptr-tool:nth-child(odd):last-child { grid-column: 1; }
    .ha-v3-power-actions { grid-template-columns: 1fr; }
    .ha-v3-service-form .btn { width: 100%; }
    .ha-v3-server-identity-head { grid-template-columns: 40px minmax(0, 1fr); padding: 17px 16px 12px; }
    .ha-v3-server-identity-head > span { width: 40px; height: 40px; }
    body.ha-v3-configure-ready .ha-v3-server-identity { padding: 0 16px 17px; }
}

html[data-ha-theme="dark"] .ha-v3-service-alert.is-warning,
html[data-ha-theme="dark"] .ha-v3-service-alert.is-pending { color: #f1c36f; }
html[data-ha-theme="dark"] .ha-v3-service-alert.is-success { color: #62d9b5; }

@media print {
    .ha-v3-service-controls { box-shadow: none; }
    .ha-v3-power-actions,
    .ha-v3-service-form .btn { display: none !important; }
}

/* cPanel service — premium hosting command center */

.ha-v4-cpanel-workspace {
    position: relative;
    margin: 18px 0 24px;
    overflow: hidden;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 24px;
    box-shadow: var(--ha3-shadow-sm);
}

.ha-v4-cpanel-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    min-height: 172px;
    padding: 28px 30px;
    gap: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 8%, rgba(255, 145, 70, .28), transparent 32%),
        radial-gradient(circle at 62% 120%, rgba(76, 109, 255, .28), transparent 42%),
        linear-gradient(135deg, #071b35 0%, #0e315a 58%, #172e57 100%);
}

.ha-v4-cpanel-header::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .15;
    background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent, #000 60%);
}

.ha-v4-cpanel-brand,
.ha-v4-cpanel-launchers { position: relative; z-index: 1; }

.ha-v4-cpanel-brand {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 17px;
}

.ha-v4-cpanel-brand > span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #ff8a45, #f45b2a);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 19px;
    box-shadow: 0 16px 32px rgba(239, 92, 38, .25), inset 0 1px rgba(255, 255, 255, .22);
    font-size: 22px;
}

.ha-v4-cpanel-brand small,
.ha-v4-cpanel-section-heading > div > span {
    display: block;
    margin-bottom: 5px;
    color: #7bd8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
}

.ha-v4-cpanel-brand h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.ha-v4-cpanel-brand p {
    max-width: 570px;
    margin: 8px 0 0;
    color: rgba(226, 239, 255, .74);
    font-size: 14px;
    line-height: 1.55;
}

.ha-v4-cpanel-launchers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.ha-v4-cpanel-launcher {
    display: inline-flex;
    min-height: 46px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff !important;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.ha-v4-cpanel-launcher > i:last-child { font-size: 10px; opacity: .7; }
.ha-v4-cpanel-launcher:hover,
.ha-v4-cpanel-launcher:focus { color: #fff !important; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); transform: translateY(-2px); }
.ha-v4-cpanel-launcher.is-launching,
.ha-v4-cpanel-launcher:disabled { cursor: wait; opacity: .66; transform: none; }
.ha-v4-cpanel-launcher.is-primary { color: #6e260d !important; background: linear-gradient(135deg, #fff, #ffe5d6); border-color: rgba(255, 255, 255, .64); }
.ha-v4-cpanel-launcher.is-primary:hover,
.ha-v4-cpanel-launcher.is-primary:focus { color: #6e260d !important; background: #fff; }

.ha-v4-cpanel-shortcuts { padding: 27px 28px 30px; }

.ha-v4-cpanel-section-heading {
    display: flex;
    margin-bottom: 18px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.ha-v4-cpanel-section-heading > div > span { color: var(--ha3-blue-text); }

.ha-v4-cpanel-section-heading h3 {
    margin: 0;
    color: var(--ha3-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.ha-v4-cpanel-count {
    padding: 7px 10px;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 15%, transparent);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    white-space: nowrap;
}

.ha-v4-cpanel-toolbar {
    display: flex;
    margin-bottom: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ha-v4-cpanel-search {
    display: flex;
    width: min(100%, 420px);
    min-height: 45px;
    margin: 0;
    padding: 0 14px;
    align-items: center;
    gap: 10px;
    color: var(--ha3-muted);
    background: color-mix(in srgb, var(--ha3-surface-soft) 86%, transparent);
    border: 1px solid var(--ha3-line);
    border-radius: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ha-v4-cpanel-search:focus-within {
    color: var(--ha3-blue-text);
    background: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--ha3-blue) 45%, var(--ha3-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ha3-blue) 10%, transparent);
}

.ha-v4-cpanel-search input {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0;
    color: var(--ha3-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 13px;
    font-weight: 650;
}

.ha-v4-cpanel-search input::placeholder { color: var(--ha3-muted); opacity: .82; }

.ha-v4-cpanel-collapse-all {
    display: inline-flex;
    min-height: 42px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ha3-copy);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.ha-v4-cpanel-collapse-all:hover,
.ha-v4-cpanel-collapse-all:focus {
    color: var(--ha3-blue-text);
    border-color: color-mix(in srgb, var(--ha3-blue) 34%, var(--ha3-line));
    transform: translateY(-1px);
}

.ha-v4-cpanel-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.ha-v4-cpanel-shortcut-grid.is-grouped {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.ha-v4-cpanel-group {
    --ha-cpanel-tone: var(--ha3-blue);
    position: relative;
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 17px;
    box-shadow: 0 10px 30px rgba(24, 36, 60, .055);
}

.ha-v4-cpanel-group::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg, var(--ha-cpanel-tone), color-mix(in srgb, var(--ha-cpanel-tone) 35%, transparent));
}

.ha-v4-cpanel-group-toggle {
    display: flex;
    width: 100%;
    min-height: 76px;
    padding: 13px 16px 13px 19px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--ha3-ink);
    text-align: left;
    background: linear-gradient(110deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha-cpanel-tone) 3%, var(--ha3-surface-soft)));
    border: 0;
    border-bottom: 1px solid var(--ha3-line);
    transition: background .18s ease;
}

.ha-v4-cpanel-group-toggle:hover,
.ha-v4-cpanel-group-toggle:focus { background: linear-gradient(110deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha-cpanel-tone) 6%, var(--ha3-surface-soft))); }

.ha-v4-cpanel-group-toggle[aria-expanded="false"] { border-bottom-color: transparent; }

.ha-v4-cpanel-group-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.ha-v4-cpanel-group-summary > span:last-child { min-width: 0; }
.ha-v4-cpanel-group-summary strong { display: block; color: var(--ha3-ink); font-size: 15px; font-weight: 850; line-height: 1.2; }
body.ha-v3-ready .ha-v4-cpanel-group-summary small { display: block; margin-top: 4px; color: var(--ha3-copy) !important; font-size: 12px; font-weight: 550; line-height: 1.45; }

.ha-v4-cpanel-group-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    color: var(--ha3-copy);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ha-v4-cpanel-group-meta > span {
    padding: 6px 9px;
    color: var(--ha-cpanel-tone);
    background: color-mix(in srgb, var(--ha-cpanel-tone) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ha-cpanel-tone) 15%, transparent);
    border-radius: 999px;
}

.ha-v4-cpanel-group-meta i { color: var(--ha-cpanel-tone); transition: transform .18s ease; }
.ha-v4-cpanel-group-toggle[aria-expanded="false"] .ha-v4-cpanel-group-meta i { transform: rotate(180deg); }

.ha-v4-cpanel-group-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 14px;
    gap: 10px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 88%, var(--ha3-surface-solid));
}

.ha-v4-cpanel-group[hidden],
.ha-v4-cpanel-group-grid[hidden],
.ha-v4-cpanel-shortcut[hidden] { display: none !important; }

.ha-v4-cpanel-shortcut {
    --ha-cpanel-tone: var(--ha3-blue);
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 15px;
    min-width: 0;
    min-height: 112px;
    padding: 15px 13px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    color: var(--ha3-ink) !important;
    text-align: left;
    background: var(--ha3-surface-solid);
    border: 1px solid color-mix(in srgb, var(--ha-cpanel-tone) 9%, var(--ha3-line));
    border-radius: 16px;
    box-shadow: none;
    line-height: 1.35;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ha-v4-cpanel-shortcut::after {
    position: absolute;
    right: -26px;
    bottom: -31px;
    width: 82px;
    height: 82px;
    content: "";
    background: color-mix(in srgb, var(--ha-cpanel-tone) 9%, transparent);
    border-radius: 50%;
}

.ha-v4-cpanel-shortcut:hover,
.ha-v4-cpanel-shortcut:focus {
    color: var(--ha3-ink) !important;
    border-color: color-mix(in srgb, var(--ha-cpanel-tone) 34%, var(--ha3-line));
    box-shadow: 0 13px 27px color-mix(in srgb, var(--ha-cpanel-tone) 10%, transparent);
    transform: translateY(-3px);
}

.ha-v4-cpanel-shortcut-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ha-cpanel-tone);
    background: color-mix(in srgb, var(--ha-cpanel-tone) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--ha-cpanel-tone) 14%, transparent);
    border-radius: 13px;
    font-size: 15px;
}

.ha-v4-cpanel-shortcut-icon.is-cpanel-jupiter {
    overflow: hidden;
    background: color-mix(in srgb, #fff 94%, var(--ha-cpanel-tone));
    border-color: color-mix(in srgb, var(--ha-cpanel-tone) 20%, #fff);
}

.ha-cpanel-jupiter-icon {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    background-image: url("../assets/cpanel/icon-spritemap.svg");
    background-repeat: no-repeat;
    background-size: 5977px 48px;
    transform: scale(.72);
    transform-origin: center;
}

.ha-cpanel-icon-apache_spam_assassin { background-position: -259px 0; }
.ha-cpanel-icon-archive { background-position: -471px 0; }
.ha-cpanel-icon-autoresponders { background-position: -524px 0; }
.ha-cpanel-icon-awstats { background-position: -577px 0; }
.ha-cpanel-icon-backup { background-position: -630px 0; }
.ha-cpanel-icon-boxtrapper { background-position: -789px 0; }
.ha-cpanel-icon-calendar_and_contacts { background-position: -842px 0; }
.ha-cpanel-icon-change_password { background-position: -1054px 0; }
.ha-cpanel-icon-cron_jobs { background-position: -1425px 0; }
.ha-cpanel-icon-default_address { background-position: -1478px 0; }
.ha-cpanel-icon-domains { background-position: -1637px 0; }
.ha-cpanel-icon-email_accounts { background-position: -1743px 0; }
.ha-cpanel-icon-email_disk_usage { background-position: -1849px 0; }
.ha-cpanel-icon-email_filters { background-position: -1902px 0; }
.ha-cpanel-icon-email_routing { background-position: -1955px 0; }
.ha-cpanel-icon-file_manager { background-position: -2273px 0; }
.ha-cpanel-icon-forwarders { background-position: -2326px 0; }
.ha-cpanel-icon-global_email_filters { background-position: -2485px 0; }
.ha-cpanel-icon-mailing_lists { background-position: -3491px 0; }
.ha-cpanel-icon-mysql_databases { background-position: -4021px 0; }
.ha-cpanel-icon-php_my_admin { background-position: -4233px 0; }
.ha-cpanel-icon-ssl_tls { background-position: -5028px 0; }
.ha-cpanel-icon-tls_status { background-position: -5240px 0; }
.ha-cpanel-icon-tls_wizard { background-position: -5293px 0; }
.ha-cpanel-icon-track_delivery { background-position: -5346px 0; }
.ha-cpanel-icon-wp-toolkit { background-position: -5876px 0; }

.ha-v4-cpanel-shortcut > span:nth-child(2) { min-width: 0; }
.ha-v4-cpanel-shortcut strong { display: block; overflow-wrap: anywhere; color: inherit; font-size: 13.5px; font-weight: 800; }
body.ha-v3-ready .ha-v4-cpanel-shortcut small { display: block; margin-top: 5px; color: var(--ha3-copy) !important; font-size: 12px; font-weight: 520; line-height: 1.5; }
.ha-v4-cpanel-shortcut > i:last-child { position: relative; z-index: 1; color: var(--ha-cpanel-tone); font-size: 10px; opacity: .72; }
.ha-v4-cpanel-shortcut.tone-mail,
.ha-v4-cpanel-group.tone-mail { --ha-cpanel-tone: #2f6fed; }
.ha-v4-cpanel-shortcut.tone-files,
.ha-v4-cpanel-group.tone-files { --ha-cpanel-tone: #7257d9; }
.ha-v4-cpanel-shortcut.tone-domains,
.ha-v4-cpanel-group.tone-domains { --ha-cpanel-tone: #0587a8; }
.ha-v4-cpanel-shortcut.tone-database,
.ha-v4-cpanel-group.tone-database { --ha-cpanel-tone: #168563; }
.ha-v4-cpanel-shortcut.tone-advanced,
.ha-v4-cpanel-group.tone-advanced { --ha-cpanel-tone: #b87514; }
.ha-v4-cpanel-shortcut.tone-analytics,
.ha-v4-cpanel-group.tone-analytics { --ha-cpanel-tone: #c64b61; }
.ha-v4-cpanel-shortcut.tone-wordpress,
.ha-v4-cpanel-group.tone-wordpress { --ha-cpanel-tone: #317a9b; }
.ha-v4-cpanel-shortcut.tone-security,
.ha-v4-cpanel-group.tone-security { --ha-cpanel-tone: #c85b32; }

.ha-v4-cpanel-workspace.is-sso-pending .ha-v4-cpanel-shortcut[href*="dosinglesignon=1"] {
    pointer-events: none;
    opacity: .58;
}

.ha-v4-cpanel-shortcut-extended::before {
    position: absolute;
    top: 8px;
    right: 9px;
    z-index: 2;
    padding: 3px 5px;
    color: var(--ha3-muted);
    content: "cPanel";
    background: color-mix(in srgb, var(--ha3-surface-solid) 86%, transparent);
    border: 1px solid var(--ha3-line);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.ha-v4-cpanel-availability-note {
    display: flex;
    margin: 17px 2px 0;
    align-items: center;
    gap: 7px;
    color: var(--ha3-copy);
    font-size: 12px;
    line-height: 1.45;
}

.ha-v4-cpanel-availability-note i { color: var(--ha3-blue-text); }

body.ha-v4-cpanel-service #cPanelPackagePanel { display: none !important; }

body.ha-v4-cpanel-service .ha-v4-cpanel-native-card {
    overflow: hidden;
    margin-bottom: 16px;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line) !important;
    border-radius: 17px !important;
    box-shadow: var(--ha3-shadow-xs);
}

body.ha-v4-cpanel-service .ha-v4-cpanel-native-card > .card-header {
    min-height: 52px;
    padding: 15px 17px;
    color: var(--ha3-ink);
    background: color-mix(in srgb, var(--ha3-surface-soft) 84%, transparent);
    border-bottom: 1px solid var(--ha3-line);
    font-size: 14px;
    font-weight: 800;
}

body.ha-v4-cpanel-service .ha-v4-cpanel-native-card > .card-body { padding: 17px; color: var(--ha3-copy); font-size: 13px; }
body.ha-v4-cpanel-service .ha-v4-cpanel-native-card .form-control { min-height: 44px; border-radius: 11px; font-size: 13px; }
body.ha-v4-cpanel-service .ha-v4-cpanel-native-card .btn { min-height: 42px; border-radius: 11px; font-size: 13px; font-weight: 750; }
body.ha-v4-cpanel-service .ha-v4-cpanel-native-card table { margin-bottom: 0; color: var(--ha3-copy); font-size: 13px; }
body.ha-v4-cpanel-service .ha-v4-cpanel-native-card .progress { height: 9px; overflow: hidden; background: var(--ha3-surface-soft); border-radius: 999px; }
body.ha-v4-cpanel-service .ha-v4-cpanel-native-card .progress-bar { background: linear-gradient(90deg, var(--ha3-blue), var(--ha3-cyan)); }

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority {
    position: relative;
    margin: 18px 0 16px !important;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ha3-blue) 17%, var(--ha3-line)) !important;
    box-shadow: 0 16px 42px rgba(24, 39, 72, .085), 0 2px 8px rgba(24, 39, 72, .035);
}

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #2f6fed, #7257d9 52%, #19a9c7);
}

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority > .card-header {
    min-height: 56px;
    padding: 17px 19px;
    color: var(--ha3-ink);
    background: linear-gradient(110deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha3-blue) 4%, var(--ha3-surface-soft)));
    font-size: 15px;
    font-weight: 850;
}

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority > .card-body {
    padding: 18px 19px 20px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 58%, var(--ha3-surface-solid));
}

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #2f6fed, #7257d9) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(71, 84, 203, .22);
}

body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority .btn-primary:hover,
body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority .btn-primary:focus {
    background: linear-gradient(135deg, #245ed5, #6248c4) !important;
    box-shadow: 0 13px 28px rgba(71, 84, 203, .28);
    transform: translateY(-1px);
}

@media (max-width: 1399.98px) {
    .ha-v4-cpanel-shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ha-v4-cpanel-shortcut-grid.is-grouped { grid-template-columns: minmax(0, 1fr); }
    .ha-v4-cpanel-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .ha-v4-cpanel-header { grid-template-columns: 1fr; min-height: 0; }
    .ha-v4-cpanel-launchers { justify-content: flex-start; }
    .ha-v4-cpanel-launcher { flex: 1 1 150px; }
}

@media (max-width: 767.98px) {
    .ha-v4-cpanel-workspace { margin-top: 13px; border-radius: 20px; }
    .ha-v4-cpanel-header { padding: 22px 19px; gap: 20px; }
    .ha-v4-cpanel-brand { grid-template-columns: 50px minmax(0, 1fr); gap: 13px; }
    .ha-v4-cpanel-brand > span { width: 50px; height: 50px; border-radius: 15px; font-size: 18px; }
    .ha-v4-cpanel-brand h2 { font-size: 22px; }
    .ha-v4-cpanel-shortcuts { padding: 21px 18px 23px; }
    .ha-v4-cpanel-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v4-cpanel-shortcut-grid.is-grouped { grid-template-columns: minmax(0, 1fr); }
    .ha-v4-cpanel-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v4-cpanel-shortcut { min-height: 105px; }
    body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority { margin-top: 13px !important; }
    body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority > .card-header { padding: 15px 16px; }
    body.ha-v4-cpanel-service .ha-v4-cpanel-quick-email-priority > .card-body { padding: 16px; }
}

@media (max-width: 479.98px) {
    .ha-v4-cpanel-brand { align-items: start; }
    .ha-v4-cpanel-brand p { font-size: 13px; }
    .ha-v4-cpanel-launcher { width: 100%; flex-basis: 100%; }
    .ha-v4-cpanel-shortcut-grid { grid-template-columns: 1fr; }
    .ha-v4-cpanel-toolbar { align-items: stretch; flex-direction: column; }
    .ha-v4-cpanel-search { width: 100%; }
    .ha-v4-cpanel-collapse-all { width: 100%; }
    .ha-v4-cpanel-group-toggle { padding: 12px 12px 12px 15px; gap: 10px; }
    .ha-v4-cpanel-group-summary small { display: none; }
    .ha-v4-cpanel-group-meta > span { display: none; }
    .ha-v4-cpanel-group-grid { grid-template-columns: 1fr; padding: 10px; }
    .ha-v4-cpanel-shortcut { min-height: 88px; padding: 13px; }
    .ha-v4-cpanel-section-heading { align-items: center; }
}

@media print {
    .ha-v4-cpanel-workspace { box-shadow: none; }
    .ha-v4-cpanel-launchers,
    .ha-v4-cpanel-shortcuts { display: none !important; }
}

/* Premium domain control center — 1.9.0 */

body.ha-v5-domain-ready .ha-v3-domain-legacy-hero { display: none !important; }

.ha-v5-domain-workspace {
    --ha-domain-blue: #2f6fed;
    --ha-domain-violet: #7257d9;
    --ha-domain-cyan: #169ab8;
    display: grid;
    margin: 18px 0 24px;
    gap: 18px;
}

.ha-v5-domain-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 10% -20%, rgba(52, 202, 232, .24), transparent 32%),
        radial-gradient(circle at 102% 120%, rgba(126, 91, 231, .3), transparent 38%),
        linear-gradient(135deg, #071426 0%, #102a50 55%, #1b1b4a 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 25px;
    box-shadow: 0 28px 78px rgba(12, 29, 58, .2);
}

.ha-v5-domain-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, #000, transparent 82%);
    pointer-events: none;
}

.ha-v5-domain-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 174px;
    padding: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ha-v5-domain-identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.ha-v5-domain-orb {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2f7bf2, #7257d9);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(57, 87, 220, .36), inset 0 1px rgba(255, 255, 255, .22);
    font-size: 23px;
}

.ha-v5-domain-identity small,
.ha-v5-domain-section-head > div > span,
.ha-v5-domain-management-head > div > span {
    display: block;
    margin-bottom: 6px;
    color: #70d7f2 !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ha-v5-domain-title-row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 12px; }
.ha-v5-domain-title-row h1 { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: clamp(26px, 2.5vw, 38px); font-weight: 850; letter-spacing: -.04em; line-height: 1.08; }
.ha-v5-domain-identity p { max-width: 660px; margin: 9px 0 0; color: rgba(226, 237, 251, .68); font-size: 13px; line-height: 1.55; }

.ha-v5-domain-status {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    gap: 6px;
    color: #91efd0;
    background: rgba(37, 197, 143, .12);
    border: 1px solid rgba(66, 220, 165, .22);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ha-v5-domain-status::before { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(89, 225, 177, .1); }
.ha-v5-domain-status.is-neutral { color: #d9e3f2; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }

.ha-v5-domain-hero-actions { display: flex; max-width: 470px; flex: 0 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }

.ha-v5-domain-hero-action {
    display: inline-flex;
    min-height: 45px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ha-v5-domain-hero-action:hover,
.ha-v5-domain-hero-action:focus { color: #fff !important; background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.ha-v5-domain-hero-action.is-primary { color: #13355f !important; background: linear-gradient(135deg, #fff, #dff8ff); border-color: rgba(255, 255, 255, .65); }
.ha-v5-domain-hero-action.is-primary:hover,
.ha-v5-domain-hero-action.is-primary:focus { color: #13355f !important; background: #fff; }
.ha-v5-domain-hero-action > i:last-child { font-size: 9px; opacity: .72; }

.ha-v5-domain-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 16px 16px;
    gap: 10px;
}

.ha-v5-domain-metric {
    display: grid;
    min-width: 0;
    min-height: 104px;
    padding: 15px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.ha-v5-domain-metric > span { display: grid; width: 40px; height: 40px; place-items: center; color: #9cdff0; background: rgba(87, 201, 230, .1); border: 1px solid rgba(116, 218, 242, .13); border-radius: 12px; }
.ha-v5-domain-metric small { display: block; color: rgba(218, 232, 249, .55) !important; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ha-v5-domain-metric strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.35; }
.ha-v5-domain-metric p { margin: 4px 0 0; color: rgba(218, 232, 249, .53); font-size: 10px; line-height: 1.4; }
.ha-v5-domain-metric.state-warning > span { color: #ffc181; background: rgba(255, 155, 72, .1); border-color: rgba(255, 173, 104, .14); }

.ha-v5-domain-tools,
.ha-v5-domain-management {
    overflow: hidden;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(25, 42, 73, .075);
}

.ha-v5-domain-tools { padding: 23px; }
.ha-v5-domain-section-head,
.ha-v5-domain-management-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ha-v5-domain-section-head { margin-bottom: 18px; }
.ha-v5-domain-section-head > div > span,
.ha-v5-domain-management-head > div > span { color: var(--ha-domain-blue) !important; }
.ha-v5-domain-section-head h2,
.ha-v5-domain-management-head h2 { margin: 0; color: var(--ha3-ink); font-size: 22px; font-weight: 850; letter-spacing: -.03em; line-height: 1.2; }
.ha-v5-domain-section-head p,
.ha-v5-domain-management-head p { margin: 5px 0 0; color: var(--ha3-copy); font-size: 12px; line-height: 1.5; }

.ha-v5-domain-tool-count {
    display: inline-flex;
    min-height: 29px;
    padding: 0 10px;
    align-items: center;
    color: var(--ha-domain-blue);
    background: color-mix(in srgb, var(--ha-domain-blue) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ha-domain-blue) 15%, transparent);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.ha-v5-domain-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }

.ha-v5-domain-tool {
    --ha-domain-tool-tone: var(--ha-domain-blue);
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 112px;
    padding: 14px;
    grid-template-columns: 43px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    color: var(--ha3-ink) !important;
    text-align: left;
    background: color-mix(in srgb, var(--ha3-surface-soft) 68%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha-domain-tool-tone) 10%, var(--ha3-line));
    border-radius: 16px;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ha-v5-domain-tool::after { position: absolute; right: -24px; bottom: -31px; width: 82px; height: 82px; content: ""; background: color-mix(in srgb, var(--ha-domain-tool-tone) 7%, transparent); border-radius: 50%; }
.ha-v5-domain-tool:hover,
.ha-v5-domain-tool:focus { color: var(--ha3-ink) !important; border-color: color-mix(in srgb, var(--ha-domain-tool-tone) 31%, var(--ha3-line)); box-shadow: 0 13px 28px color-mix(in srgb, var(--ha-domain-tool-tone) 9%, transparent); transform: translateY(-3px); }
.ha-v5-domain-tool.is-active {
    color: var(--ha3-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ha-domain-tool-tone) 12%, var(--ha3-surface-solid)), var(--ha3-surface-solid));
    border-color: color-mix(in srgb, var(--ha-domain-tool-tone) 46%, var(--ha3-line));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--ha-domain-tool-tone) 13%, transparent), inset 0 3px var(--ha-domain-tool-tone);
    transform: translateY(-2px);
}
.ha-v5-domain-tool.is-active .ha-v5-domain-tool-icon {
    color: #fff;
    background: var(--ha-domain-tool-tone);
    border-color: transparent;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ha-domain-tool-tone) 25%, transparent);
}
.ha-v5-domain-tool.is-active > i { opacity: 1; transform: translateX(2px); }
.ha-v5-domain-tool-icon { display: grid; width: 43px; height: 43px; place-items: center; color: var(--ha-domain-tool-tone); background: color-mix(in srgb, var(--ha-domain-tool-tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ha-domain-tool-tone) 13%, transparent); border-radius: 13px; font-size: 15px; }
.ha-v5-domain-tool > span:nth-child(2) { min-width: 0; }
.ha-v5-domain-tool strong { display: block; color: var(--ha3-ink); font-size: 13px; font-weight: 820; }
body.ha-v3-ready .ha-v5-domain-tool small { display: block; margin-top: 5px; color: var(--ha3-copy) !important; font-size: 11px; font-weight: 540; line-height: 1.45; }
.ha-v5-domain-tool > i { position: relative; z-index: 1; color: var(--ha-domain-tool-tone); font-size: 9px; opacity: .72; }
.ha-v5-domain-tool.tone-dns { --ha-domain-tool-tone: #1685a6; }
.ha-v5-domain-tool.tone-nameservers { --ha-domain-tool-tone: #2f6fed; }
.ha-v5-domain-tool.tone-renewal { --ha-domain-tool-tone: #168563; }
.ha-v5-domain-tool.tone-security { --ha-domain-tool-tone: #7257d9; }
.ha-v5-domain-tool.tone-addons { --ha-domain-tool-tone: #b87514; }
.ha-v5-domain-tool.tone-contacts { --ha-domain-tool-tone: #c64b61; }
.ha-v5-domain-tool.tone-email { --ha-domain-tool-tone: #317a9b; }
.ha-v5-domain-tool.tone-advanced { --ha-domain-tool-tone: #596b86; }
.ha-v5-domain-tool.tone-epp { --ha-domain-tool-tone: #8b5a2b; }

.ha-v5-domain-management { scroll-margin-top: 104px; }
.ha-v5-domain-management-head { padding: 22px 23px 18px; background: linear-gradient(110deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha-domain-blue) 3%, var(--ha3-surface-soft))); border-bottom: 1px solid var(--ha3-line); }
.ha-v5-domain-tabs { display: flex; max-width: 650px; padding: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; background: color-mix(in srgb, var(--ha3-surface-soft) 80%, transparent); border: 1px solid var(--ha3-line); border-radius: 13px; }
.ha-v5-domain-tab { display: inline-flex; min-height: 37px; padding: 0 11px; align-items: center; justify-content: center; gap: 7px; color: var(--ha3-copy); background: transparent; border: 0; border-radius: 9px; font-size: 11px; font-weight: 780; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.ha-v5-domain-tab:hover,
.ha-v5-domain-tab:focus { color: var(--ha3-ink); background: color-mix(in srgb, var(--ha-domain-blue) 7%, transparent); }
.ha-v5-domain-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--ha-domain-blue), var(--ha-domain-violet)); box-shadow: 0 8px 20px rgba(65, 81, 205, .2); }

.ha-v5-domain-selection-feedback {
    display: flex;
    min-height: 55px;
    margin: 15px 18px 0;
    padding: 10px 13px;
    align-items: center;
    gap: 11px;
    color: var(--ha3-copy);
    background: color-mix(in srgb, var(--ha-domain-blue) 6%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha-domain-blue) 17%, var(--ha3-line));
    border-radius: 13px;
}
.ha-v5-domain-selection-feedback > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--ha-domain-blue);
    background: color-mix(in srgb, var(--ha-domain-blue) 10%, transparent);
    border-radius: 10px;
}
.ha-v5-domain-selection-feedback strong { display: block; color: var(--ha3-ink); font-size: 12px; font-weight: 830; }
.ha-v5-domain-selection-feedback small { display: block; margin-top: 2px; color: var(--ha3-muted); font-size: 10px; line-height: 1.4; }
.ha-v5-domain-selection-feedback.is-updated { animation: ha-domain-selection-pulse .7s ease-out; }
.ha-v5-domain-management.is-panel-revealed { animation: ha-domain-panel-reveal .75s ease-out; }

@keyframes ha-domain-selection-pulse {
    0% { background: color-mix(in srgb, var(--ha-domain-blue) 20%, var(--ha3-surface-solid)); transform: translateY(-2px); }
    100% { background: color-mix(in srgb, var(--ha-domain-blue) 6%, var(--ha3-surface-solid)); transform: translateY(0); }
}

@keyframes ha-domain-panel-reveal {
    0% { border-color: color-mix(in srgb, var(--ha-domain-blue) 55%, var(--ha3-line)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ha-domain-blue) 10%, transparent), 0 18px 50px rgba(25, 42, 73, .075); }
    100% { border-color: var(--ha3-line); box-shadow: 0 18px 50px rgba(25, 42, 73, .075); }
}

.ha-v5-domain-native-content { padding: 18px; background: color-mix(in srgb, var(--ha3-surface-soft) 72%, var(--ha3-surface-solid)); }
.ha-v5-domain-tab-content { margin: 0 !important; }
.ha-v5-domain-native-content .tab-pane > .card { overflow: hidden; margin: 0; color: var(--ha3-ink); background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 17px; box-shadow: 0 8px 25px rgba(24, 41, 70, .045); }
.ha-v5-domain-native-content .tab-pane > .card > .card-body { padding: 21px; color: var(--ha3-copy); font-size: 13px; }
.ha-v5-domain-native-content .tab-pane .card-title { margin: 0 0 17px; color: var(--ha3-ink); font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.ha-v5-domain-native-content .tab-pane hr { margin: 18px 0; border-color: var(--ha3-line); }

.ha-v5-domain-native-content #tabOverview > .card .card-body > .row.mb-3 { display: grid; margin: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.ha-v5-domain-native-content #tabOverview > .card .card-body > .row.mb-3 + .row.mb-3 { margin-top: 11px !important; }
.ha-v5-domain-native-content #tabOverview > .card .card-body > .row.mb-3 > [class*="col-"] { max-width: none; min-height: 86px; padding: 14px 15px; flex: none; background: color-mix(in srgb, var(--ha3-surface-soft) 75%, var(--ha3-surface-solid)); border: 1px solid var(--ha3-line); border-radius: 14px; }
.ha-v5-domain-native-content #tabOverview h5 { margin: 0 0 7px; color: var(--ha3-muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.ha-v5-domain-native-content #tabOverview h5 + span,
.ha-v5-domain-native-content #tabOverview h5 + a { color: var(--ha3-ink); font-size: 13px; font-weight: 760; }
.ha-v5-domain-native-today { display: none !important; }
.ha-v5-domain-native-content #tabOverview .card-body > h3.card-title:nth-of-type(2),
.ha-v5-domain-native-content #tabOverview .card-body > h3.card-title:nth-of-type(2) + ul { display: none !important; }

body.ha-v5-domain-overview-ready .ha-v5-domain-native-content #tabOverview > .card { display: none !important; }

.ha-v5-domain-overview-dashboard {
    overflow: hidden;
    color: var(--ha3-ink);
    background: var(--ha3-surface-solid);
    border: 1px solid var(--ha3-line);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(24, 41, 70, .055);
}

.ha-v5-domain-profile-head {
    display: flex;
    min-height: 104px;
    padding: 20px 21px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(circle at 88% 0, color-mix(in srgb, var(--ha-domain-violet) 8%, transparent), transparent 32%),
        linear-gradient(120deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha-domain-blue) 3%, var(--ha3-surface-soft)));
    border-bottom: 1px solid var(--ha3-line);
}

.ha-v5-domain-profile-head > div > span { display: block; margin-bottom: 5px; color: var(--ha-domain-blue); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.ha-v5-domain-profile-head h3 { margin: 0; color: var(--ha3-ink); font-size: 20px; font-weight: 860; letter-spacing: -.025em; }
.ha-v5-domain-profile-head p { margin: 5px 0 0; color: var(--ha3-copy); font-size: 12px; }
.ha-v5-domain-profile-status { display: inline-flex; min-height: 31px; padding: 0 12px; align-items: center; gap: 7px; color: #168563; background: color-mix(in srgb, #1faf82 9%, var(--ha3-surface-solid)); border: 1px solid color-mix(in srgb, #1faf82 20%, var(--ha3-line)); border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.ha-v5-domain-profile-status::before { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 11%, transparent); }

.ha-v5-domain-profile-grid { display: grid; padding: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.ha-v5-domain-profile-link { min-width: 0; color: inherit !important; text-decoration: none !important; }
.ha-v5-domain-profile-item {
    --ha-profile-tone: var(--ha-domain-blue);
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 108px;
    padding: 15px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ha3-surface-soft) 72%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha-profile-tone) 11%, var(--ha3-line));
    border-radius: 15px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ha-v5-domain-profile-link:hover .ha-v5-domain-profile-item,
.ha-v5-domain-profile-link:focus .ha-v5-domain-profile-item { border-color: color-mix(in srgb, var(--ha-profile-tone) 30%, var(--ha3-line)); box-shadow: 0 12px 26px color-mix(in srgb, var(--ha-profile-tone) 8%, transparent); transform: translateY(-2px); }
.ha-v5-domain-profile-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ha-profile-tone); background: color-mix(in srgb, var(--ha-profile-tone) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ha-profile-tone) 13%, transparent); border-radius: 13px; font-size: 14px; }
.ha-v5-domain-profile-item small { display: block; color: var(--ha3-muted) !important; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ha-v5-domain-profile-item strong { display: block; margin-top: 6px; overflow-wrap: anywhere; color: var(--ha3-ink); font-size: 14px; font-weight: 820; line-height: 1.32; }
.ha-v5-domain-profile-item p { margin: 5px 0 0; color: var(--ha3-copy); font-size: 10px; line-height: 1.35; }
.ha-v5-domain-profile-item > i { position: absolute; top: 13px; right: 13px; color: var(--ha-profile-tone); font-size: 9px; opacity: .7; }
.ha-v5-domain-profile-item.tone-registered { --ha-profile-tone: #7257d9; }
.ha-v5-domain-profile-item.tone-renewal { --ha-profile-tone: #168563; }
.ha-v5-domain-profile-item.tone-billing { --ha-profile-tone: #b87514; }
.ha-v5-domain-profile-item.tone-payment { --ha-profile-tone: #317a9b; }
.ha-v5-domain-profile-item.tone-initial { --ha-profile-tone: #596b86; }

.ha-v5-domain-health-strip { display: grid; margin: 0 16px 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: color-mix(in srgb, var(--ha3-surface-soft) 70%, var(--ha3-surface-solid)); border: 1px solid var(--ha3-line); border-radius: 14px; }
.ha-v5-domain-health-item { display: grid; min-width: 0; min-height: 64px; padding: 12px 14px; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 9px; border-right: 1px solid var(--ha3-line); }
.ha-v5-domain-health-item:last-child { border-right: 0; }
.ha-v5-domain-health-item > i { display: grid; width: 27px; height: 27px; place-items: center; color: #168563; background: color-mix(in srgb, #1faf82 10%, transparent); border-radius: 9px; font-size: 11px; }
.ha-v5-domain-health-item small { display: block; color: var(--ha3-muted) !important; font-size: 8px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.ha-v5-domain-health-item strong { display: block; margin-top: 3px; overflow-wrap: anywhere; color: var(--ha3-ink); font-size: 11px; font-weight: 790; line-height: 1.3; }
.ha-v5-domain-health-item.is-warning > i { color: #b87514; background: color-mix(in srgb, #e6a23c 11%, transparent); }
.ha-v5-domain-health-item.is-neutral > i { color: var(--ha3-muted); background: color-mix(in srgb, var(--ha3-muted) 10%, transparent); }

.ha-v5-domain-native-content .tab-pane form { margin: 0; }
.ha-v5-domain-native-content .tab-pane .form-control,
.ha-v5-domain-native-content .tab-pane input[type="text"],
.ha-v5-domain-native-content .tab-pane select { min-height: 44px; color: var(--ha3-ink); background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 11px; font-size: 13px; }
.ha-v5-domain-native-content .tab-pane .btn { min-height: 42px; padding: 0 15px; border-radius: 11px; font-size: 12px; font-weight: 800; }
.ha-v5-domain-native-content .tab-pane .btn-primary,
.ha-v5-domain-native-content .tab-pane .btn-success { color: #fff !important; background: linear-gradient(135deg, var(--ha-domain-blue), var(--ha-domain-violet)) !important; border-color: transparent !important; box-shadow: 0 9px 22px rgba(66, 82, 205, .18); }
.ha-v5-domain-native-content .tab-pane .btn-danger { color: #bb4352 !important; background: color-mix(in srgb, #d84e60 8%, var(--ha3-surface-solid)) !important; border-color: color-mix(in srgb, #d84e60 23%, var(--ha3-line)) !important; }

#tabAddons > .card > .card-body > p:first-of-type { margin: -7px 0 18px; color: var(--ha3-copy); font-size: 12px; }
#tabAddons > .card > .card-body > hr { display: none; }
.ha-v5-domain-native-content #tabAddons .card-body > .row { display: grid; margin: 0 !important; padding: 17px; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; color: var(--ha3-copy); background: color-mix(in srgb, var(--ha3-surface-soft) 74%, var(--ha3-surface-solid)); border: 1px solid var(--ha3-line); border-radius: 15px; }
.ha-v5-domain-native-content #tabAddons .card-body > .row + .row { margin-top: 11px !important; }
.ha-v5-domain-native-content #tabAddons .card-body > .row > [class*="col-"] { max-width: none; padding: 0; flex: none; }
.ha-v5-domain-native-content #tabAddons .card-body > .row > :first-child { display: grid; width: 52px; height: 52px; place-items: center; color: var(--ha-domain-violet); background: color-mix(in srgb, var(--ha-domain-violet) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ha-domain-violet) 13%, transparent); border-radius: 15px; }
.ha-v5-domain-native-content #tabAddons .card-body > .row > :first-child .fa-3x { font-size: 20px; }
.ha-v5-domain-native-content #tabAddons .card-body > .row > :first-child .fa-2x { font-size: 13px; }
.ha-v5-domain-native-content #tabAddons .card-body > .row strong { color: var(--ha3-ink); font-size: 14px; font-weight: 830; }
.ha-v5-domain-native-content #tabAddons .card-body > .row form { display: flex; margin-top: 12px; align-items: center; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1399.98px) {
    .ha-v5-domain-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v5-domain-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .ha-v5-domain-hero-main { align-items: flex-start; flex-direction: column; }
    .ha-v5-domain-hero-actions { max-width: none; justify-content: flex-start; }
    .ha-v5-domain-management-head { align-items: flex-start; flex-direction: column; }
    .ha-v5-domain-tabs { width: 100%; max-width: none; justify-content: flex-start; }
    .ha-v5-domain-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v5-domain-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v5-domain-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v5-domain-health-item:nth-child(2) { border-right: 0; }
    .ha-v5-domain-health-item:nth-child(-n+2) { border-bottom: 1px solid var(--ha3-line); }
}

@media (max-width: 767.98px) {
    .ha-v5-domain-workspace { margin-top: 13px; gap: 14px; }
    .ha-v5-domain-hero,
    .ha-v5-domain-tools,
    .ha-v5-domain-management { border-radius: 19px; }
    .ha-v5-domain-hero-main { min-height: 0; padding: 22px 18px; }
    .ha-v5-domain-identity { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
    .ha-v5-domain-orb { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }
    .ha-v5-domain-title-row h1 { font-size: 25px; }
    .ha-v5-domain-hero-action { flex: 1 1 145px; }
    .ha-v5-domain-metrics { grid-template-columns: 1fr; padding: 0 12px 12px; }
    .ha-v5-domain-metric { min-height: 86px; }
    .ha-v5-domain-tools { padding: 18px; }
    .ha-v5-domain-section-head { align-items: flex-start; }
    .ha-v5-domain-tool-grid { grid-template-columns: 1fr; }
    .ha-v5-domain-tool { min-height: 92px; }
    .ha-v5-domain-management-head { padding: 18px; }
    .ha-v5-domain-management { scroll-margin-top: 82px; }
    .ha-v5-domain-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ha-v5-domain-tab { flex: 0 0 auto; }
    .ha-v5-domain-selection-feedback { margin: 12px 12px 0; }
    .ha-v5-domain-native-content { padding: 12px; }
    .ha-v5-domain-profile-head { min-height: 0; padding: 17px; align-items: flex-start; }
    .ha-v5-domain-profile-grid { padding: 12px; grid-template-columns: 1fr; }
    .ha-v5-domain-profile-item { min-height: 96px; }
    .ha-v5-domain-health-strip { margin: 0 12px 12px; }
    .ha-v5-domain-native-content .tab-pane > .card > .card-body { padding: 17px; }
    .ha-v5-domain-native-content #tabOverview > .card .card-body > .row.mb-3 { grid-template-columns: 1fr; }
    .ha-v5-domain-native-content #tabAddons .card-body > .row { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; gap: 11px; }
    .ha-v5-domain-native-content #tabAddons .card-body > .row > :first-child { width: 44px; height: 44px; border-radius: 13px; }
}

@media (max-width: 479.98px) {
    .ha-v5-domain-title-row { align-items: flex-start; flex-direction: column; }
    .ha-v5-domain-hero-actions { width: 100%; }
    .ha-v5-domain-hero-action { width: 100%; flex-basis: 100%; }
    .ha-v5-domain-section-head { gap: 10px; }
    .ha-v5-domain-tool-count { display: none; }
    .ha-v5-domain-profile-head { flex-direction: column; gap: 12px; }
    .ha-v5-domain-health-strip { grid-template-columns: 1fr; }
    .ha-v5-domain-health-item { border-right: 0; border-bottom: 1px solid var(--ha3-line); }
    .ha-v5-domain-health-item:last-child { border-bottom: 0; }
}

@media print {
    .ha-v5-domain-hero { color: #111; background: #fff; box-shadow: none; }
    .ha-v5-domain-hero-actions,
    .ha-v5-domain-tools,
    .ha-v5-domain-tabs { display: none !important; }
}

/* Premium billing and support workspaces — 2.0.0 */

body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-hero,
body.ha-v6-ticket-detail .ha-v3-page-ticket-detail {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 86% 0, rgba(97, 115, 255, .28), transparent 31%),
        radial-gradient(circle at 4% 120%, rgba(33, 199, 219, .17), transparent 35%),
        linear-gradient(135deg, #07182c 0%, #102c53 58%, #202d69 100%);
    border-color: rgba(120, 166, 228, .2);
    box-shadow: 0 24px 60px rgba(15, 38, 76, .18);
}

body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-hero::after,
body.ha-v6-ticket-detail .ha-v3-page-ticket-detail::after { position: absolute; right: -70px; bottom: -120px; width: 240px; height: 240px; content: ""; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255, 255, 255, .025), 0 0 0 70px rgba(255, 255, 255, .018); pointer-events: none; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-copy > span,
body.ha-v6-ticket-detail .ha-v3-page-copy > span { color: #79d9f3 !important; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-copy h1,
body.ha-v6-ticket-detail .ha-v3-page-copy h1 { color: #fff; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-copy p,
body.ha-v6-ticket-detail .ha-v3-page-copy p { color: rgba(225, 237, 251, .68); }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-icon,
body.ha-v6-ticket-detail .ha-v3-page-icon { position: relative; z-index: 1; color: #fff; background: linear-gradient(145deg, #2b8cff, #745df8); border-color: rgba(255, 255, 255, .22); box-shadow: 0 15px 34px rgba(40, 106, 235, .31); }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-page-action { position: relative; z-index: 1; color: #102f56 !important; background: #fff !important; border-color: rgba(255, 255, 255, .7) !important; box-shadow: 0 12px 28px rgba(1, 12, 31, .19); }

.ha-v6-list-insights { margin-bottom: 14px; overflow: hidden; color: var(--ha3-ink); background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 20px; box-shadow: 0 16px 42px rgba(24, 41, 70, .065); }
.ha-v6-list-insight-grid { display: grid; padding: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ha-v6-list-insight {
    --ha-v6-insight-tone: var(--ha3-blue);
    display: grid;
    min-width: 0;
    min-height: 104px;
    padding: 15px;
    grid-template-columns: 39px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    background: color-mix(in srgb, var(--ha3-surface-soft) 72%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha-v6-insight-tone) 11%, var(--ha3-line));
    border-radius: 15px;
}
.ha-v6-list-insight > span { display: grid; width: 39px; height: 39px; place-items: center; color: var(--ha-v6-insight-tone); background: color-mix(in srgb, var(--ha-v6-insight-tone) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ha-v6-insight-tone) 13%, transparent); border-radius: 12px; font-size: 13px; }
.ha-v6-list-insight small { display: block; color: var(--ha3-muted) !important; font-size: 9px !important; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ha-v6-list-insight strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--ha3-ink); font-size: 14px; font-weight: 830; line-height: 1.3; }
.ha-v6-list-insight p { margin: 4px 0 0; color: var(--ha3-copy); font-size: 10px; line-height: 1.4; }
.ha-v6-list-insight.tone-warning { --ha-v6-insight-tone: #bd7515; }
.ha-v6-list-insight.tone-healthy { --ha-v6-insight-tone: #168563; }
.ha-v6-list-insight.tone-violet { --ha-v6-insight-tone: #7257d9; }
.ha-v6-list-insight.tone-cyan { --ha-v6-insight-tone: #1685a6; }
.ha-v6-list-filters { display: flex; min-height: 56px; padding: 9px 14px; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--ha3-surface-soft) 72%, var(--ha3-surface-solid)); border-top: 1px solid var(--ha3-line); }
.ha-v6-list-filters > span { color: var(--ha3-muted); font-size: 10px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ha-v6-list-filters > div { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.ha-v6-status-filter { min-height: 32px; padding: 0 11px; color: var(--ha3-copy); background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 999px; font-size: 10px; font-weight: 780; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.ha-v6-status-filter:hover,
.ha-v6-status-filter:focus { color: var(--ha3-blue-text); border-color: color-mix(in srgb, var(--ha3-blue) 28%, var(--ha3-line)); }
.ha-v6-status-filter.is-active { color: #fff; background: linear-gradient(135deg, var(--ha3-action), var(--ha3-action-2)); border-color: transparent; box-shadow: 0 7px 18px rgba(55, 85, 215, .18); }

body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-list-toolbar { min-height: 76px; padding: 13px 15px; background: var(--ha3-surface-solid); border-radius: 18px; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .ha-v3-list-symbol { color: #fff; background: linear-gradient(145deg, #2b8cff, #745df8); box-shadow: 0 10px 22px rgba(55, 92, 222, .2); }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) .dataTables_wrapper > .listtable { overflow: hidden; border-radius: 19px; box-shadow: 0 15px 40px rgba(24, 41, 70, .06); }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) table.dataTable thead th { background: color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-soft)); }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) table.dataTable tbody tr { cursor: pointer; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) table.dataTable tbody td { position: relative; }
body.ha-v3-list-invoices table.dataTable .ha-v6-record-cell-0,
body.ha-v3-list-tickets table.dataTable .ha-v6-record-cell-1 { color: var(--ha3-ink); font-weight: 820; }
body.ha-v3-list-invoices table.dataTable .ha-v6-record-cell-0::before { margin-right: 8px; color: var(--ha3-blue-text); content: "\f571"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
body.ha-v3-list-tickets table.dataTable .ha-v6-record-cell-1 a::after { margin-left: 8px; color: var(--ha3-blue-text); content: "\f061"; font-family: "Font Awesome 5 Free"; font-size: 8px; font-weight: 900; opacity: .65; }
body:is(.ha-v3-list-invoices, .ha-v3-list-tickets) table.dataTable .ha-v3-status { min-width: 74px; display: inline-flex; min-height: 27px; padding: 0 9px; align-items: center; justify-content: center; border-radius: 999px; font-size: 9px; font-weight: 820; letter-spacing: .03em; text-transform: uppercase; }

/* Ticket conversation */

body.ha-v6-ticket-detail .ha-v3-page-ticket-detail { min-height: 154px; }
body.ha-v6-ticket-detail .ha-v3-page-tools { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ha-v6-ticket-hero-status,
.ha-v6-ticket-hero-reply { display: inline-flex; min-height: 40px; padding: 0 13px; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 11px; font-weight: 820; }
.ha-v6-ticket-hero-status { color: #9ce9d0; background: rgba(49, 199, 148, .11); border: 1px solid rgba(89, 221, 175, .2); }
.ha-v6-ticket-hero-status.status-closed { color: #d7e0ec; background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .13); }
.ha-v6-ticket-hero-reply { color: #102f56; background: #fff; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 24px rgba(0, 14, 37, .2); }
.ha-v6-ticket-summary { display: grid; margin: 16px 0; padding: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 19px; box-shadow: 0 13px 35px rgba(24, 41, 70, .055); }
.ha-v6-ticket-summary-item { display: grid; min-width: 0; min-height: 82px; padding: 12px; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 9px; background: color-mix(in srgb, var(--ha3-surface-soft) 72%, var(--ha3-surface-solid)); border: 1px solid var(--ha3-line); border-radius: 13px; }
.ha-v6-ticket-summary-item > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--ha3-blue-text); background: color-mix(in srgb, var(--ha3-blue) 9%, transparent); border-radius: 11px; font-size: 12px; }
.ha-v6-ticket-summary-item small { display: block; color: var(--ha3-muted) !important; font-size: 8px !important; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
.ha-v6-ticket-summary-item strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ha3-ink); font-size: 12px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ha-v6-ticket-summary-item p { margin: 3px 0 0; color: var(--ha3-copy); font-size: 9px; }
body.ha-v6-ticket-detail .primary-content > .alert { padding: 13px 16px; color: #9a6414; background: color-mix(in srgb, #f6b84d 9%, var(--ha3-surface-solid)); border: 1px solid color-mix(in srgb, #e3a137 22%, var(--ha3-line)); border-radius: 14px; font-size: 12px; box-shadow: none; }
.ha-v6-ticket-thread,
.ha-v6-ticket-reply-card { overflow: hidden; border: 1px solid var(--ha3-line); border-radius: 20px; box-shadow: 0 16px 42px rgba(24, 41, 70, .065); }
.ha-v6-ticket-thread > .card-body:first-child { padding: 20px !important; background: linear-gradient(110deg, var(--ha3-surface-solid), color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-soft))); border-bottom: 1px solid var(--ha3-line); }
.ha-v6-ticket-thread > .card-body:first-child .card-title { margin: 0 0 9px; color: var(--ha3-ink); font-size: 20px; font-weight: 850; letter-spacing: -.025em; }
.ha-v6-ticket-thread > .card-body:first-child > p { margin: 0; color: var(--ha3-copy); font-size: 12px; }
.ha-v6-ticket-thread .ticket-actions .btn { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 10px; font-weight: 790; }
.ha-v6-ticket-thread > .card-body:not(:first-child) { padding: 17px; background: color-mix(in srgb, var(--ha3-surface-soft) 66%, var(--ha3-surface-solid)); }
.ha-v6-ticket-thread .ticket-reply { overflow: hidden; background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 15px; box-shadow: 0 8px 24px rgba(24, 41, 70, .045); }
.ha-v6-ticket-thread .posted-by { padding: 11px 14px; color: var(--ha3-copy); background: color-mix(in srgb, var(--ha3-blue) 3%, var(--ha3-surface-soft)); border-bottom: 1px solid var(--ha3-line); font-size: 10px; }
.ha-v6-ticket-thread .posted-by-name { color: var(--ha3-ink); font-weight: 820; }
.ha-v6-ticket-thread .message { min-height: 110px; padding: 17px !important; color: var(--ha3-ink); font-size: 13px; line-height: 1.7; }
.ha-v6-ticket-reply-card { margin-top: 16px; }
.ha-v6-ticket-reply-card > .card-body { padding: 21px; }
.ha-v6-ticket-reply-card .card-title { margin-bottom: 18px; color: var(--ha3-ink); font-size: 20px; font-weight: 850; }
.ha-v6-ticket-reply-card .form-control { min-height: 44px; background: var(--ha3-surface-solid); border-color: var(--ha3-line); border-radius: 11px; }
.ha-v6-ticket-reply-card .md-editor { overflow: hidden; background: var(--ha3-surface-solid); border: 1px solid var(--ha3-line); border-radius: 14px; }
.ha-v6-ticket-reply-card .md-header { padding: 8px; background: color-mix(in srgb, var(--ha3-surface-soft) 75%, var(--ha3-surface-solid)); border-bottom: 1px solid var(--ha3-line); }
.ha-v6-ticket-reply-card .md-input { min-height: 230px; padding: 14px; border: 0; border-radius: 0; }
.ha-v6-ticket-reply-card .custom-file-label { min-height: 44px; padding-top: 11px; border-color: var(--ha3-line); border-radius: 11px; }
.ha-v6-ticket-reply-card input[type="submit"] { min-height: 43px; padding: 0 22px; background: linear-gradient(135deg, var(--ha3-blue), var(--ha3-violet)); border: 0; border-radius: 11px; font-weight: 800; box-shadow: 0 10px 24px rgba(55, 86, 214, .18); }

@media (max-width: 1199.98px) {
    .ha-v6-list-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-v6-ticket-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .ha-v6-list-insight-grid { padding: 11px; grid-template-columns: 1fr; }
    .ha-v6-list-insight { min-height: 92px; }
    .ha-v6-list-filters { padding: 11px; align-items: flex-start; flex-direction: column; }
    .ha-v6-list-filters > div { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ha-v6-status-filter { flex: 0 0 auto; }
    body.ha-v6-ticket-detail .ha-v3-page-tools { width: 100%; justify-content: flex-start; }
    .ha-v6-ticket-summary { grid-template-columns: 1fr; }
    .ha-v6-ticket-summary-item { min-height: 74px; }
    .ha-v6-ticket-thread > .card-body:first-child .card-title { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; }
    .ha-v6-ticket-thread .ticket-actions { float: none !important; }
    .ha-v6-ticket-reply-card > .card-body { padding: 16px; }
}

@media print {
    .ha-v6-list-insights,
    .ha-v6-ticket-summary,
    .ha-v6-ticket-hero-reply { display: none !important; }
}

/* Adaptive large-display density — 2.1.0
   Large and ultrawide displays receive a genuinely larger application canvas,
   typography and controls. Tablet/mobile rules remain owned by the existing
   max-width breakpoints above; no zoom or transform is used. */

@media (min-width: 1800px) {
    html { font-size: 17px; }

    body.ha-client-shell {
        --ha-rail-width: 88px;
        --ha-rail-expanded: 286px;
    }

    body.ha-premium-ready .container {
        width: calc(100% - 56px);
        max-width: none;
    }

    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 124px; }

    .ha-side-rail {
        top: 100px;
        left: 28px;
        border-radius: 25px;
    }

    body.ha-page-scrolled .ha-side-rail { top: 20px; }
    .ha-rail-head { height: 80px; padding: 14px 20px; }
    .ha-rail-mark,
    .ha-rail-icon,
    .ha-rail-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
    .ha-rail-link { min-height: 60px; font-size: 15px; }
    .ha-rail-submenu a { min-height: 42px; font-size: 14px; }
    .ha-rail-account strong { font-size: 14px; }
    .ha-rail-account small { font-size: 12px; }

    body.ha-v3-ready {
        --ha-type-body: 16px;
        --ha-type-ui: 15px;
        --ha-type-small: 13px;
        --ha-type-label: 12px;
        --ha-type-card-title: 17px;
        --ha-type-section: 25px;
    }

    body.ha-client-shell .header .navbar-light,
    body.ha-client-shell .header .navbar-light > .container { min-height: 84px; height: 84px; }
    body.ha-client-shell .header .navbar-brand .logo-img { max-width: 210px; max-height: 41px; }
    body.ha-client-shell .ha-header-actions > .btn,
    body.ha-client-shell .ha-header-actions .active-client .btn,
    body.ha-client-shell .header .toolbar .nav-link { min-width: 48px; height: 48px; }

    .ha-v3-page-hero {
        min-height: 148px;
        grid-template-columns: 62px minmax(0, 1fr) auto;
        margin-bottom: 26px;
        padding: 26px 30px;
        gap: 20px;
        border-radius: 26px;
    }
    .ha-v3-page-icon { width: 62px; height: 62px; border-radius: 19px; font-size: 20px; }
    .ha-v3-page-copy h1 { font-size: clamp(34px, 2vw, 44px); }
    .ha-v3-page-action { min-height: 50px; padding: 0 20px; border-radius: 14px; }

    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }
    .ha-v3-workspace-main,
    .ha-v3-updates { padding: 30px; }
    .ha-v3-health-item { min-height: 100px; grid-template-columns: 48px minmax(0, 1fr) 14px; padding: 16px; gap: 14px; }
    .ha-v3-health-icon { width: 48px; height: 48px; font-size: 16px; }
    .ha-v3-update-item { min-height: 92px; grid-template-columns: 46px minmax(0, 1fr) 14px; padding: 15px; gap: 13px; }
    .ha-v3-update-icon { width: 46px; height: 46px; font-size: 16px; }
    .ha-v3-next-action { padding: 32px; }

    body.ha-dashboard .tiles .tile { min-height: 176px; }
    body.ha-v3-list-page .dataTables_filter input { height: 50px; }
    body.ha-v3-list-page table.dataTable thead th { height: 60px; }
    body.ha-v3-list-page table.dataTable tbody td { height: 78px; }

    .ha-v6-list-insight-grid { padding: 17px; gap: 13px; }
    .ha-v6-list-insight { min-height: 122px; padding: 18px; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
    .ha-v6-list-insight > span { width: 46px; height: 46px; font-size: 15px; }
    .ha-v6-list-insight small { font-size: var(--ha-type-label) !important; }
    .ha-v6-list-insight strong { font-size: var(--ha-type-card-title); }
    .ha-v6-list-insight p { font-size: var(--ha-type-small); }
    .ha-v6-list-filters > span,
    .ha-v6-status-filter { font-size: var(--ha-type-small); }
    .ha-v6-status-filter { min-height: 38px; padding: 0 14px; }
    .ha-v6-ticket-summary-item { min-height: 98px; padding: 15px; grid-template-columns: 43px minmax(0, 1fr); gap: 12px; }
    .ha-v6-ticket-summary-item > span { width: 43px; height: 43px; font-size: 14px; }
    .ha-v6-ticket-summary-item small { font-size: var(--ha-type-label) !important; }
    .ha-v6-ticket-summary-item strong { font-size: var(--ha-type-card-title); }
    .ha-v6-ticket-summary-item p { font-size: var(--ha-type-small); }
    .ha-v6-ticket-thread .posted-by { font-size: var(--ha-type-small); }
    .ha-v6-ticket-thread .message { font-size: var(--ha-type-body); }
}

@media (min-width: 2560px) {
    html { font-size: 18px; }

    body.ha-client-shell {
        --ha-rail-width: 104px;
        --ha-rail-expanded: 320px;
    }

    body.ha-premium-ready .container { width: calc(100% - 80px); }
    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 154px; }

    .ha-side-rail { top: 112px; left: 36px; border-radius: 29px; }
    body.ha-page-scrolled .ha-side-rail { top: 24px; }
    .ha-rail-head { height: 94px; padding: 17px 25px; }
    .ha-rail-mark,
    .ha-rail-icon,
    .ha-rail-avatar { width: 54px; height: 54px; flex-basis: 54px; border-radius: 17px; font-size: 18px; }
    .ha-rail-link { min-height: 70px; font-size: 18px; }
    .ha-rail-submenu a { min-height: 48px; font-size: 16px; }
    .ha-rail-account strong { font-size: 16px; }
    .ha-rail-account small { font-size: 14px; }

    body.ha-v3-ready {
        --ha-type-body: 18px;
        --ha-type-ui: 17px;
        --ha-type-small: 15px;
        --ha-type-label: 13px;
        --ha-type-card-title: 19px;
        --ha-type-section: 29px;
    }

    body.ha-client-shell .header .navbar-light,
    body.ha-client-shell .header .navbar-light > .container { min-height: 96px; height: 96px; }
    body.ha-client-shell .header .navbar-brand .logo-img { max-width: 240px; max-height: 48px; }
    body.ha-client-shell .ha-header-actions > .btn,
    body.ha-client-shell .ha-header-actions .active-client .btn,
    body.ha-client-shell .header .toolbar .nav-link { min-width: 56px; height: 56px; padding-right: 16px; padding-left: 16px; }

    .ha-v3-page-hero {
        min-height: 178px;
        grid-template-columns: 76px minmax(0, 1fr) auto;
        margin-bottom: 32px;
        padding: 32px 38px;
        gap: 25px;
        border-radius: 31px;
    }
    .ha-v3-page-icon { width: 76px; height: 76px; border-radius: 23px; font-size: 25px; }
    .ha-v3-page-copy h1 { font-size: clamp(42px, 1.7vw, 56px); }
    .ha-v3-page-action { min-height: 58px; padding: 0 25px; border-radius: 17px; }

    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; }
    .ha-v3-workspace-main,
    .ha-v3-updates { padding: 38px; }
    .ha-v3-health-grid,
    .ha-v3-update-list { gap: 17px; }
    .ha-v3-health-item { min-height: 122px; grid-template-columns: 58px minmax(0, 1fr) 16px; padding: 20px; gap: 17px; border-radius: 20px; }
    .ha-v3-health-icon { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; }
    .ha-v3-update-item { min-height: 112px; grid-template-columns: 56px minmax(0, 1fr) 16px; padding: 19px; gap: 16px; border-radius: 19px; }
    .ha-v3-update-icon { width: 56px; height: 56px; border-radius: 17px; font-size: 19px; }
    .ha-v3-next-action { padding: 40px; }
    .ha-v3-next-icon { width: 66px; height: 66px; font-size: 21px; }
    .ha-v3-next-action h3 { font-size: 28px; }
    .ha-v3-next-action .btn { min-height: 54px; padding: 0 21px; }

    body.ha-dashboard .tiles .tile { min-height: 210px; border-radius: 27px; }
    body.ha-dashboard .tiles .tile .stat { font-size: 50px; }
    body.ha-dashboard .tiles .ha-credit-value { font-size: 32px; }
    body.ha-v3-list-page .dataTables_filter input { height: 58px; }
    body.ha-v3-list-page table.dataTable thead th { height: 68px; }
    body.ha-v3-list-page table.dataTable tbody td { height: 90px; }

    .ha-v6-list-insights,
    .ha-v6-ticket-summary,
    .ha-v6-ticket-thread,
    .ha-v6-ticket-reply-card { border-radius: 25px; }
    .ha-v6-list-insight-grid { padding: 22px; gap: 17px; }
    .ha-v6-list-insight { min-height: 150px; padding: 22px; grid-template-columns: 56px minmax(0, 1fr); gap: 17px; border-radius: 20px; }
    .ha-v6-list-insight > span { width: 56px; height: 56px; border-radius: 17px; font-size: 18px; }
    .ha-v6-list-filters { min-height: 76px; padding: 13px 22px; }
    .ha-v6-status-filter { min-height: 46px; padding: 0 18px; }
    .ha-v6-ticket-summary { padding: 17px; gap: 14px; }
    .ha-v6-ticket-summary-item { min-height: 120px; padding: 19px; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; border-radius: 18px; }
    .ha-v6-ticket-summary-item > span { width: 52px; height: 52px; border-radius: 15px; font-size: 17px; }
    .ha-v6-ticket-thread > .card-body:first-child,
    .ha-v6-ticket-reply-card > .card-body { padding: 28px !important; }
    .ha-v6-ticket-thread > .card-body:not(:first-child) { padding: 24px; }
    .ha-v6-ticket-thread .message { min-height: 150px; padding: 24px !important; }
}

@media (min-width: 3200px) {
    html { font-size: 20px; }

    body.ha-client-shell {
        --ha-rail-width: 116px;
        --ha-rail-expanded: 356px;
    }

    body.ha-premium-ready .container { width: calc(100% - 128px); }
    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 180px; }
    .ha-side-rail { left: 48px; }

    body.ha-v3-ready {
        --ha-type-body: 20px;
        --ha-type-ui: 19px;
        --ha-type-small: 16px;
        --ha-type-label: 14px;
        --ha-type-card-title: 21px;
        --ha-type-section: 32px;
    }

    .ha-v3-page-hero { min-height: 196px; padding: 38px 45px; }
    .ha-v3-page-copy h1 { font-size: clamp(48px, 1.55vw, 62px); }
    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 510px; gap: 32px; }
}

/* Premium invoice register — 2.2.0 */

body.ha-v3-list-invoices .ha-v6-list-insights {
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(24, 41, 70, .085);
}

body.ha-v3-list-invoices .ha-v6-list-insight {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ha-v6-insight-tone) 8%, transparent), transparent 52%),
        var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--ha-v6-insight-tone) 15%, var(--ha3-line));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.ha-v3-list-invoices .ha-v6-list-insight:hover {
    border-color: color-mix(in srgb, var(--ha-v6-insight-tone) 30%, var(--ha3-line));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ha-v6-insight-tone) 10%, transparent);
    transform: translateY(-2px);
}

body.ha-v3-list-invoices .ha-v6-list-insight:first-child {
    color: #fff;
    background:
        radial-gradient(circle at 92% -20%, rgba(255, 190, 81, .24), transparent 54%),
        linear-gradient(145deg, #0a1b31, #122f55 68%, #253265);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 16px 34px rgba(11, 33, 62, .17);
}

body.ha-v3-list-invoices .ha-v6-list-insight:first-child > span {
    color: #ffd48b;
    background: rgba(255, 190, 81, .12);
    border-color: rgba(255, 211, 136, .18);
}

body.ha-v3-list-invoices .ha-v6-list-insight:first-child small,
body.ha-v3-list-invoices .ha-v6-list-insight:first-child p { color: rgba(221, 233, 248, .64) !important; }
body.ha-v3-list-invoices .ha-v6-list-insight:first-child strong { color: #fff; }

body.ha-v3-list-invoices .ha-v6-list-filters {
    background: linear-gradient(110deg, color-mix(in srgb, var(--ha3-blue) 4%, var(--ha3-surface-soft)), var(--ha3-surface-solid));
}

body.ha-v3-list-invoices .ha-v6-status-filter {
    border-color: color-mix(in srgb, var(--ha3-blue) 9%, var(--ha3-line));
    box-shadow: 0 5px 14px rgba(24, 41, 70, .035);
}

body.ha-v3-list-invoices .ha-v3-list-toolbar {
    border-color: color-mix(in srgb, var(--ha3-blue) 9%, var(--ha3-line));
    box-shadow: 0 16px 38px rgba(24, 41, 70, .06);
}

body.ha-v3-list-invoices .dataTables_wrapper > .listtable {
    overflow: hidden;
    background: var(--ha3-surface-solid);
    border-color: color-mix(in srgb, var(--ha3-blue) 10%, var(--ha3-line));
    border-radius: 24px;
    box-shadow: 0 24px 65px rgba(24, 41, 70, .08);
}

body.ha-v3-list-invoices .dataTables_filter {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 16px 8px;
    background: radial-gradient(circle at 0 0, rgba(54, 127, 245, .05), transparent 35%),
        var(--ha3-surface-solid);
}

body.ha-v3-list-invoices .dataTables_info {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 18px 10px !important;
    color: var(--ha3-muted) !important;
    background: var(--ha3-surface-solid);
    font-weight: 680;
}

body.ha-v3-list-invoices table.dataTable {
    border-top-color: color-mix(in srgb, var(--ha3-blue) 9%, var(--ha3-line));
}

body.ha-v3-list-invoices table.dataTable thead th {
    height: 58px;
    padding-right: 20px;
    padding-left: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ha3-blue) 5%, var(--ha3-surface-soft)), var(--ha3-surface-soft));
}

body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record {
    --ha-v7-row-tone: #7d8ca2;
    position: relative;
}

body.ha-v3-list-invoices table.dataTable tbody tr[data-ha-billing-state="unpaid"] { --ha-v7-row-tone: #d58a1c; }
body.ha-v3-list-invoices table.dataTable tbody tr[data-ha-billing-state="paid"] { --ha-v7-row-tone: #1a9b72; }
body.ha-v3-list-invoices table.dataTable tbody tr[data-ha-billing-state="refunded"] { --ha-v7-row-tone: #6f61d8; }
body.ha-v3-list-invoices table.dataTable tbody tr[data-ha-billing-state="cancelled"] { --ha-v7-row-tone: #8b98aa; }
body.ha-v3-list-invoices table.dataTable tbody tr[data-ha-billing-state="payment-pending"] { --ha-v7-row-tone: #2f7fe8; }

body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td {
    height: 72px;
    padding: 16px 20px;
    background: var(--ha3-surface-solid);
    transition: background .18s ease, box-shadow .18s ease;
}

body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child {
    position: relative;
    padding-left: 24px;
}

body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child::after {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 4px;
    content: "";
    background: var(--ha-v7-row-tone);
    border-radius: 0 6px 6px 0;
    opacity: .72;
}

body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record:hover td {
    background: color-mix(in srgb, var(--ha-v7-row-tone) 4%, var(--ha3-surface-solid));
    box-shadow: 0 1px color-mix(in srgb, var(--ha-v7-row-tone) 10%, transparent) inset;
}

.ha-v7-invoice-identity,
.ha-v7-invoice-date,
.ha-v7-invoice-amount { display: inline-flex; min-width: 0; }

.ha-v7-invoice-identity { align-items: center; gap: 12px; }
.ha-v7-invoice-glyph {
    width: 42px;
    height: 42px;
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    color: var(--ha-v7-row-tone);
    background: color-mix(in srgb, var(--ha-v7-row-tone) 9%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha-v7-row-tone) 14%, var(--ha3-line));
    border-radius: 13px;
    font-size: 13px;
}

.ha-v7-invoice-identity > span:last-child,
.ha-v7-invoice-date,
.ha-v7-invoice-amount { flex-direction: column; align-items: flex-start; }

.ha-v7-invoice-identity small,
.ha-v7-invoice-date small,
.ha-v7-invoice-amount small {
    display: block;
    margin-top: 4px;
    color: var(--ha3-muted) !important;
    font-size: var(--ha-type-label);
    font-weight: 760;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ha-v7-invoice-identity small { margin: 0 0 3px; }
.ha-v7-invoice-identity strong { display: block; color: var(--ha3-ink); font-size: var(--ha-type-card-title); font-weight: 850; letter-spacing: -.015em; }
.ha-v7-invoice-date strong { color: var(--ha3-copy); font-size: var(--ha-type-ui); font-weight: 680; line-height: 1.35; }
.ha-v7-invoice-date.is-urgent strong,
.ha-v7-invoice-date.is-urgent small { color: #a9690d !important; }
.ha-v7-invoice-date.is-overdue strong,
.ha-v7-invoice-date.is-overdue small { color: #bd4253 !important; }
.ha-v7-invoice-amount strong { color: var(--ha3-ink); font-size: calc(var(--ha-type-card-title) + 1px); font-weight: 860; letter-spacing: -.02em; }

body.ha-v3-list-invoices table.dataTable .ha-v6-record-cell-0::before { display: none; }
body.ha-v3-list-invoices table.dataTable .ha-v6-record-cell-4 { white-space: nowrap; }

.ha-v7-invoice-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Unified list toolbar and table heading for Services, Domains, Invoices and Tickets. */
body.ha-v3-list-page .dataTables_wrapper > .listtable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
    grid-template-areas:
        "info filter"
        "table table";
    align-items: stretch;
    overflow: hidden;
}

body.ha-v3-list-page .dataTables_info {
    grid-area: info;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px !important;
    color: var(--ha3-muted) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ha3-blue) 4%, var(--ha3-surface-solid)), var(--ha3-surface-solid));
    border-bottom: 1px solid var(--ha3-line);
    font-size: var(--ha-type-small);
    font-weight: 650;
}

body.ha-v3-list-page .dataTables_info::before {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    color: var(--ha3-blue-text);
    background: color-mix(in srgb, var(--ha3-blue) 9%, var(--ha3-surface-solid));
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 13%, var(--ha3-line));
    border-radius: 10px;
    content: "\f03a";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
}

body.ha-v3-list-page .dataTables_filter {
    grid-area: filter;
    min-height: 58px;
    display: flex;
    float: none !important;
    align-items: center;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 7px 14px;
    background: var(--ha3-surface-solid);
    border-bottom: 1px solid var(--ha3-line);
}

body.ha-v3-list-page .dataTables_filter label {
    display: block;
    width: min(300px, 100%);
}

body.ha-v3-list-page .dataTables_filter label::before {
    left: 15px;
    color: var(--ha3-muted);
    font-size: 12px;
}

body.ha-v3-list-page .dataTables_filter input {
    height: 42px !important;
    box-sizing: border-box;
    padding: 0 14px 0 42px !important;
    background-color: color-mix(in srgb, var(--ha3-blue) 2%, var(--ha3-surface-soft));
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--ha3-blue) 11%, var(--ha3-line));
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 5px 14px rgba(24, 41, 70, .035);
}

body.ha-v3-list-page .dataTables_filter input:focus,
body.ha-v3-list-page .dataTables_filter input:focus-visible {
    border-color: color-mix(in srgb, var(--ha3-blue) 45%, var(--ha3-line)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ha3-blue) 11%, transparent) !important;
}

body.ha-v3-list-page table.dataTable {
    grid-area: table;
    width: 100% !important;
    border-top: 0 !important;
}

body.ha-v3-list-page table.dataTable thead th {
    height: 56px !important;
    box-sizing: border-box;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    vertical-align: middle !important;
    line-height: 1.2;
}

/* Domain list: explicit management affordance beside the native status. */
.ha-v10-domain-state {
    display: inline-grid;
    width: 200px;
    max-width: 100%;
    grid-template-columns: minmax(72px, 1fr) 110px;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

body.ha-v3-list-domains #tableDomainsList th:last-child,
body.ha-v3-list-domains #tableDomainsList td:last-child {
    text-align: center !important;
}

body.ha-v3-list-domains #tableDomainsList td:last-child {
    vertical-align: middle !important;
}

body.ha-v3-list-domains .ha-v10-domain-state > .status {
    justify-self: center;
    margin: 0;
}

.ha-v10-domain-manage {
    display: inline-flex;
    width: 110px;
    min-height: 35px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff !important;
    background: linear-gradient(135deg, #2f6fed, #6955d9);
    border: 1px solid color-mix(in srgb, #2f6fed 72%, #fff);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(53, 81, 193, .18), inset 0 1px rgba(255, 255, 255, .2);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ha-v10-domain-manage > i:first-child { font-size: 10px; }
.ha-v10-domain-manage > i:last-child { font-size: 8px; opacity: .85; transition: transform .18s ease; }
.ha-v10-domain-manage:hover,
.ha-v10-domain-manage:focus {
    color: #fff !important;
    box-shadow: 0 11px 24px rgba(53, 81, 193, .26), inset 0 1px rgba(255, 255, 255, .24);
    filter: saturate(1.08);
    transform: translateY(-2px);
}
.ha-v10-domain-manage:hover > i:last-child,
.ha-v10-domain-manage:focus > i:last-child { transform: translateX(2px); }

@media (max-width: 767.98px) {
    body.ha-v3-list-page .dataTables_wrapper > .listtable {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "filter"
            "info"
            "table";
    }
    body.ha-v3-list-page .dataTables_filter {
        min-height: 56px;
        margin: 0 !important;
        padding: 7px 10px;
        border-bottom: 0;
    }
    body.ha-v3-list-page .dataTables_filter label { width: 100%; }
    body.ha-v3-list-page .dataTables_info {
        min-height: 40px;
        justify-content: center;
        padding: 6px 10px 8px !important;
    }
    body.ha-v3-list-page .dataTables_info::before { width: 27px; height: 27px; flex-basis: 27px; }
    body.ha-v3-list-domains .ha-v10-domain-state {
        display: inline-flex;
        width: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 7px;
    }
    body.ha-v3-list-domains .ha-v10-domain-manage { width: auto; min-width: 104px; min-height: 34px; padding: 0 10px; }
}

@media (min-width: 768px) {
    body.ha-v3-list-invoices table.dataTable th:nth-child(1) { width: 24% !important; }
    body.ha-v3-list-invoices table.dataTable th:nth-child(2),
    body.ha-v3-list-invoices table.dataTable th:nth-child(3) { width: 20% !important; }
    body.ha-v3-list-invoices table.dataTable th:nth-child(4) { width: 13% !important; }
    body.ha-v3-list-invoices table.dataTable th:nth-child(5) { width: 23% !important; }
    body.ha-v3-list-invoices .ha-v7-invoice-date strong { white-space: nowrap; }
}

.ha-v7-invoice-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 0 11px;
    gap: 7px;
    color: var(--ha-v7-row-tone);
    background: color-mix(in srgb, var(--ha-v7-row-tone) 8%, var(--ha3-surface-soft));
    border: 1px solid color-mix(in srgb, var(--ha-v7-row-tone) 15%, var(--ha3-line));
    border-radius: 10px;
    font-size: var(--ha-type-label);
    font-weight: 800;
    white-space: nowrap;
    transition: gap .18s ease, background .18s ease;
}

tr.ha-v7-invoice-record:hover .ha-v7-invoice-action { gap: 10px; background: color-mix(in srgb, var(--ha-v7-row-tone) 13%, var(--ha3-surface-soft)); }

body.ha-v3-list-invoices table.dataTable .ha-v3-status {
    min-width: 88px;
    min-height: 32px;
    border: 1px solid transparent;
    box-shadow: none;
}

body.ha-v3-list-invoices table.dataTable .status-unpaid { color: #98600d; background: #fff5dc; border-color: #f4dda6; }
body.ha-v3-list-invoices table.dataTable .status-paid { color: #117655; background: #e9f8f1; border-color: #c5ebdb; }
body.ha-v3-list-invoices table.dataTable .status-refunded { color: #5d50bd; background: #f0edff; border-color: #dcd5ff; }
body.ha-v3-list-invoices table.dataTable .status-cancelled { color: #657286; background: #eef2f6; border-color: #dbe2ea; }
body.ha-v3-list-invoices table.dataTable .status-payment-pending { color: #2769ba; background: #eaf3ff; border-color: #cee2fb; }

body.ha-v3-list-invoices .dataTables_paginate {
    border-top: 1px solid var(--ha3-line);
    background: linear-gradient(180deg, var(--ha3-surface-solid), var(--ha3-surface-soft));
}

body.ha-v3-list-invoices .pagination .page-link {
    min-width: 37px;
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    font-weight: 740;
}

@media (min-width: 1800px) {
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td { height: 72px; padding: 16px 24px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child { padding-left: 28px; }
    .ha-v7-invoice-glyph { width: 48px; height: 48px; flex-basis: 48px; font-size: 15px; }
    .ha-v7-invoice-action { min-height: 38px; padding: 0 14px; }
}

@media (min-width: 2560px) {
    body.ha-v3-list-invoices .dataTables_filter { min-height: 92px; padding: 18px 22px 10px; }
    body.ha-v3-list-invoices table.dataTable thead th { height: 68px; padding-right: 28px; padding-left: 28px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td { height: 82px; padding: 20px 28px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child { padding-left: 33px; }
    .ha-v7-invoice-glyph { width: 58px; height: 58px; flex-basis: 58px; border-radius: 17px; font-size: 18px; }
    .ha-v7-invoice-action { min-height: 46px; padding: 0 18px; border-radius: 13px; }
    body.ha-v3-list-invoices table.dataTable .ha-v3-status { min-width: 108px; min-height: 40px; }
}

@media (max-width: 767.98px) {
    body.ha-v3-list-invoices .dataTables_wrapper > .listtable { overflow: visible; border-radius: 18px; }
    body.ha-v3-list-invoices .dataTables_filter { min-height: 66px; padding: 11px; }
    body.ha-v3-list-invoices .dataTables_filter label { width: 100%; }
    body.ha-v3-list-invoices .dataTables_info { min-height: 34px; padding: 0 12px 9px !important; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record { padding-top: 15px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td,
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child { min-height: 48px; height: auto; padding: 9px 2px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record::before { background: var(--ha-v7-row-tone); }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td:first-child::after { display: none; }
    .ha-v7-invoice-glyph,
    .ha-v7-invoice-identity small { display: none; }
    .ha-v7-invoice-identity { justify-content: flex-end; gap: 9px; }
    .ha-v7-invoice-identity > span:last-child,
    .ha-v7-invoice-date,
    .ha-v7-invoice-amount { align-items: flex-end; }
    .ha-v7-invoice-identity strong,
    .ha-v7-invoice-date strong,
    .ha-v7-invoice-amount strong { font-size: 14px; text-align: right; }
    .ha-v7-invoice-identity small,
    .ha-v7-invoice-date small,
    .ha-v7-invoice-amount small { font-size: 10px; text-align: right; }
    .ha-v7-invoice-state { width: 100%; justify-content: flex-end; gap: 7px; }
    .ha-v7-invoice-action { min-height: 32px; margin-left: 0; padding: 0 9px; font-size: 10px; }
    body.ha-v3-list-invoices table.dataTable .ha-v3-status { min-width: 76px; min-height: 29px; }
}

/* International wide-screen density rebalance — 2.2.1
   Keep the full-width canvas introduced in 2.1.0, but cap visual scale to the
   restrained density used by mature international SaaS control panels. */

@media (min-width: 1800px) {
    html { font-size: 16px; }

    body.ha-client-shell {
        --ha-rail-width: 82px;
        --ha-rail-expanded: 272px;
    }

    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 116px; }

    .ha-side-rail { top: 96px; left: 28px; border-radius: 23px; }
    body.ha-page-scrolled .ha-side-rail { top: 18px; }
    .ha-rail-head { height: 74px; padding: 13px 18px; }
    .ha-rail-mark,
    .ha-rail-icon,
    .ha-rail-avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; font-size: 15px; }
    .ha-rail-link { min-height: 56px; font-size: 14px; }
    .ha-rail-submenu a { min-height: 40px; font-size: 13px; }
    .ha-rail-account strong { font-size: 13px; }
    .ha-rail-account small { font-size: 11px; }

    body.ha-v3-ready {
        --ha-type-body: 15px;
        --ha-type-ui: 14px;
        --ha-type-small: 12.5px;
        --ha-type-label: 11.5px;
        --ha-type-card-title: 16px;
        --ha-type-section: 22px;
    }

    body.ha-client-shell .header .navbar-light,
    body.ha-client-shell .header .navbar-light > .container { min-height: 80px; height: 80px; }
    body.ha-client-shell .header .navbar-brand .logo-img { max-width: 200px; max-height: 38px; }
    body.ha-client-shell .ha-header-actions > .btn,
    body.ha-client-shell .ha-header-actions .active-client .btn,
    body.ha-client-shell .header .toolbar .nav-link { min-width: 44px; height: 44px; padding-right: 12px; padding-left: 12px; }

    .ha-v3-page-hero {
        min-height: 138px;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        margin-bottom: 24px;
        padding: 24px 28px;
        gap: 18px;
        border-radius: 24px;
    }
    .ha-v3-page-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 18px; }
    .ha-v3-page-copy h1 { font-size: clamp(32px, 1.8vw, 40px); }
    .ha-v3-page-action { min-height: 46px; padding: 0 18px; border-radius: 13px; }

    body.ha-v3-dashboard .ha-dashboard-hero {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        padding: 34px 40px;
    }
    .ha-dashboard-hero h1 { margin-bottom: 12px; font-size: 48px; line-height: 1.03; }
    .ha-dashboard-hero p { font-size: 15px; line-height: 1.55; }
    .ha-hero-actions { margin-top: 21px; }
    .ha-hero-actions .btn { min-height: 44px; padding: 0 16px; font-size: 13px; }
    .ha-v3-hero-signal { margin-top: 12px; }
    .ha-v3-hero-signal strong { font-size: 11px; }
    .ha-v3-hero-signal small { font-size: 10px; }
    .ha-trust-orbit { transform: scale(.9); }
    .ha-trust-copy span { font-size: 10px; }
    .ha-trust-copy strong { font-size: 14px; }
    .ha-trust-features { font-size: 10px; }

    body.ha-dashboard .tiles .tile { min-height: 160px; border-radius: 23px; }
    body.ha-dashboard .tiles .tile > i { width: 42px; height: 42px; font-size: 15px; }
    body.ha-dashboard .tiles .tile .stat { font-size: 36px; }
    body.ha-dashboard .tiles .tile .title { font-size: 11.5px; }
    body.ha-dashboard .tiles .ha-credit-value { font-size: 24px; }
    body.ha-dashboard .tiles .ha-credit-action { font-size: 10.5px; }

    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
    .ha-v3-workspace-main,
    .ha-v3-updates { padding: 26px; }
    .ha-v3-section-heading { margin-bottom: 18px; }
    .ha-v3-health-grid,
    .ha-v3-update-list { gap: 11px; }
    .ha-v3-health-item { min-height: 88px; grid-template-columns: 42px minmax(0, 1fr) 12px; padding: 13px 14px; gap: 11px; }
    .ha-v3-health-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 14px; }
    .ha-v3-update-item { min-height: 82px; grid-template-columns: 40px minmax(0, 1fr) 12px; padding: 12px 13px; gap: 11px; }
    .ha-v3-update-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
    .ha-v3-next-action { padding: 28px; }
    .ha-v3-next-icon { width: 50px; height: 50px; font-size: 17px; }
    .ha-v3-next-action h3 { font-size: 20px; }
    .ha-v3-next-action .btn { min-height: 42px; padding: 0 15px; }

    body.ha-v3-list-page table.dataTable thead th { height: 56px; }
    body.ha-v3-list-page table.dataTable tbody td { height: 72px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td { height: 68px; padding: 15px 21px; }
    .ha-v7-invoice-glyph { width: 44px; height: 44px; flex-basis: 44px; font-size: 14px; }
}

@media (min-width: 2560px) {
    html { font-size: 17px; }

    body.ha-client-shell {
        --ha-rail-width: 90px;
        --ha-rail-expanded: 292px;
    }

    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 132px; }
    .ha-side-rail { top: 102px; left: 32px; border-radius: 25px; }
    body.ha-page-scrolled .ha-side-rail { top: 20px; }
    .ha-rail-head { height: 80px; padding: 14px 21px; }
    .ha-rail-mark,
    .ha-rail-icon,
    .ha-rail-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; font-size: 16px; }
    .ha-rail-link { min-height: 60px; font-size: 15px; }
    .ha-rail-submenu a { min-height: 42px; font-size: 14px; }

    body.ha-v3-ready {
        --ha-type-body: 16px;
        --ha-type-ui: 15px;
        --ha-type-small: 13px;
        --ha-type-label: 12px;
        --ha-type-card-title: 17px;
        --ha-type-section: 24px;
    }

    body.ha-client-shell .header .navbar-light,
    body.ha-client-shell .header .navbar-light > .container { min-height: 86px; height: 86px; }
    body.ha-client-shell .header .navbar-brand .logo-img { max-width: 218px; max-height: 42px; }
    body.ha-client-shell .ha-header-actions > .btn,
    body.ha-client-shell .ha-header-actions .active-client .btn,
    body.ha-client-shell .header .toolbar .nav-link { min-width: 48px; height: 48px; padding-right: 14px; padding-left: 14px; }

    .ha-v3-page-hero { min-height: 150px; grid-template-columns: 62px minmax(0, 1fr) auto; padding: 27px 32px; gap: 20px; border-radius: 26px; }
    .ha-v3-page-icon { width: 62px; height: 62px; border-radius: 19px; font-size: 20px; }
    .ha-v3-page-copy h1 { font-size: clamp(36px, 1.55vw, 44px); }
    .ha-v3-page-action { min-height: 49px; padding: 0 20px; }

    body.ha-v3-dashboard .ha-dashboard-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 450px); padding: 36px 44px; }
    .ha-dashboard-hero h1 { font-size: 50px; }
    .ha-dashboard-hero p { font-size: 16px; }
    .ha-hero-actions .btn { min-height: 46px; font-size: 14px; }
    .ha-trust-orbit { transform: scale(.94); }

    body.ha-dashboard .tiles .tile { min-height: 170px; border-radius: 24px; }
    body.ha-dashboard .tiles .tile > i { width: 46px; height: 46px; font-size: 16px; }
    body.ha-dashboard .tiles .tile .stat { font-size: 40px; }
    body.ha-dashboard .tiles .ha-credit-value { font-size: 27px; }

    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 360px; gap: 21px; }
    .ha-v3-workspace-main,
    .ha-v3-updates { padding: 29px; }
    .ha-v3-health-item { min-height: 96px; grid-template-columns: 46px minmax(0, 1fr) 13px; padding: 15px 16px; gap: 13px; }
    .ha-v3-health-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; }
    .ha-v3-update-item { min-height: 88px; grid-template-columns: 44px minmax(0, 1fr) 13px; padding: 14px; gap: 12px; }
    .ha-v3-update-icon { width: 44px; height: 44px; font-size: 15px; }
    .ha-v3-next-action { padding: 30px; }
    .ha-v3-next-icon { width: 54px; height: 54px; font-size: 18px; }
    .ha-v3-next-action h3 { font-size: 22px; }
    .ha-v3-next-action .btn { min-height: 45px; padding: 0 17px; }

    body.ha-v3-list-page table.dataTable thead th { height: 60px; }
    body.ha-v3-list-page table.dataTable tbody td { height: 78px; }
    body.ha-v3-list-invoices table.dataTable tbody tr.ha-v7-invoice-record td { height: 72px; padding: 17px 24px; }
    .ha-v7-invoice-glyph { width: 48px; height: 48px; flex-basis: 48px; font-size: 15px; }
}

@media (min-width: 3200px) {
    html { font-size: 18px; }

    body.ha-client-shell {
        --ha-rail-width: 96px;
        --ha-rail-expanded: 310px;
    }

    body.ha-client-shell #main-body > .container,
    body.ha-client-shell .master-breadcrumb > .container,
    body.ha-client-shell .footer > .container { padding-left: 144px; }
    .ha-side-rail { left: 40px; }

    body.ha-v3-ready {
        --ha-type-body: 17px;
        --ha-type-ui: 16px;
        --ha-type-small: 14px;
        --ha-type-label: 12.5px;
        --ha-type-card-title: 18px;
        --ha-type-section: 26px;
    }

    body.ha-v3-dashboard .ha-dashboard-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); padding: 39px 48px; }
    .ha-dashboard-hero h1 { font-size: 52px; }
    .ha-dashboard-hero p { font-size: 17px; }
    body.ha-dashboard .tiles .tile { min-height: 180px; }
    .ha-v3-workspace { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
    .ha-v3-health-item { min-height: 102px; }
    .ha-v3-health-icon { width: 48px; height: 48px; }
    .ha-v3-next-action { padding: 33px; }
}

/* Keep shared list controls compact after page-specific and ultra-wide rules. */
body.ha-v3-list-page .dataTables_filter {
    min-height: 58px !important;
    margin: 0 !important;
    padding: 7px 14px !important;
}

body.ha-v3-list-page .dataTables_info {
    min-height: 58px !important;
    padding: 8px 18px !important;
}

body.ha-v3-list-page table.dataTable thead th {
    height: 56px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

@media (max-width: 767.98px) {
    body.ha-v3-list-page .dataTables_filter {
        min-height: 56px !important;
        padding: 7px 10px !important;
        border-bottom: 0;
    }

    body.ha-v3-list-page .dataTables_info {
        min-height: 40px !important;
        justify-content: center;
        padding: 6px 10px 8px !important;
    }
}