.hosting-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.14em;
    stroke-width: 2;
}

.hosting-icon--md {
    width: 20px;
    height: 20px;
}

.hestiacp-operation-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1.5px solid rgba(255, 106, 0, .18);
    border-top-color: var(--hosting-orange);
    border-radius: 50%;
    animation: hosting-refresh-spin .8s linear infinite;
}

.hestiacp-operation-dots {
    display: inline-flex;
    min-width: 16px;
    color: currentColor;
}

.hestiacp-operation-dots span {
    opacity: .2;
    animation: hestiacp-operation-dot 1.2s infinite ease-in-out;
}

.hestiacp-operation-dots span:nth-child(2) { animation-delay: .18s; }
.hestiacp-operation-dots span:nth-child(3) { animation-delay: .36s; }

.hestiacp-operation-status {
    display: inline-flex;
    min-height: var(--hosting-control-compact-height);
    align-items: center;
    color: var(--hosting-muted);
    line-height: var(--hosting-line-height-table);
    white-space: nowrap;
}

.hestiacp-operation-status .hestiacp-operation-dots {
    margin-left: 3px;
}

.hestiacp-operation-status--error {
    color: var(--hosting-danger);
}

.hestiacp-operation-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    vertical-align: middle;
}

[data-hestia-backups] .hosting-data-table tbody tr.hestiacp-operation-table-row,
[data-hestia-backups] .hosting-data-table tbody tr.hestiacp-operation-table-row > td {
    height: calc(var(--hosting-control-compact-height) + 20px);
    min-height: calc(var(--hosting-control-compact-height) + 20px);
}

@keyframes hestiacp-operation-dot {
    0%, 60%, 100% { opacity: .2; }
    30% { opacity: 1; }
}

.hosting-btn__icon {
    margin: 0;
}

.hosting-status__icon {
    width: 15px;
    height: 15px;
}

.hwl-tab {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.hwl-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .22);
}

/*
 * Shared hosting UI layer.
 * Keep functional module classes (hwd/hmail/hdb/hftp/hfm) for JS hooks,
 * but attach these classes to share one visual system across tabs.
 */
.hosting-ui {
    --hosting-radius-xl: 28px;
    --hosting-radius-lg: 14px;
    --hosting-radius-md: 8px;
    --hosting-font-size-secondary: 13px;
    --hosting-line-height-secondary: 1.35;
    --hosting-font-weight-label: 600;
    --hosting-font-weight-form-label: 400;
    --hosting-font-weight-form-control: 400;
    --hosting-font-size-table: 13px;
    --hosting-line-height-table: 1.35;
    --hosting-font-size-control: 13px;
    --hosting-line-height-control: 1;
    --hosting-font-weight-control: 650;
    --hosting-panel-title-size: 18px;
    --hosting-panel-title-line-height: 1.2;
    --hosting-panel-subtitle-size: 13px;
    --hosting-panel-subtitle-line-height: 1.35;
    --hosting-modal-title-size: 18px;
    --hosting-modal-title-line-height: 1.15;
    --hosting-control-compact-height: 32px;
    --hosting-control-compact-padding-inline: 10px;
    --hosting-control-compact-radius: 8px;
    --hosting-control-compact-icon-size: 16px;
    --hosting-control-compact-gap: 6px;
    --hosting-resource-row-height: calc(var(--hosting-control-compact-height) + 20px);
    --hosting-modal-secondary-height: var(--hosting-primary-height);
    --hosting-modal-secondary-padding-inline: var(--hosting-control-compact-padding-inline);
    --hosting-modal-secondary-font-size: var(--hosting-font-size-control);
    --hosting-modal-secondary-line-height: var(--hosting-line-height-control);
    --hosting-primary-height: 29px;
    --hosting-primary-padding-inline: var(--hosting-control-compact-padding-inline);
    --hosting-primary-radius: var(--hosting-control-compact-radius);
    --hosting-primary-font-size: var(--hosting-font-size-control);
    --hosting-primary-line-height: var(--hosting-line-height-control);
    --hosting-primary-font-weight: var(--hosting-font-weight-control);
    --hosting-primary-brand: oklch(57.72% .2324 260);
    --hosting-primary-bg: color-mix(in oklch, var(--hosting-primary-brand), white 30%);
    --hosting-primary-gradient-start: color-mix(in oklch, var(--hosting-primary-brand), white 15%);
    --hosting-primary-gradient-hover-start: var(--hosting-primary-bg);
    --hosting-primary-gradient-end: var(--hosting-primary-brand);
    --hosting-primary-ring: color-mix(in oklch, var(--hosting-primary-brand), black 10%);
    --hosting-primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --hosting-border: oklch(14.5% 0 0 / 0.10);
    --hosting-border-strong: oklch(14.5% 0 0 / 0.16);
    --hosting-focus-border: #8d8d8d;
    --hosting-focus-ring: transparent;
    --hosting-bg: #ffffff;
    --hosting-surface: #ffffff;
    --hosting-surface-soft: #edf2f8;
    --hosting-surface-muted: #fbfcff;
    --hosting-text: #172033;
    --hosting-muted: #66728a;
    --hosting-orange: #ff6a00;
    --hosting-orange-hover: #e85f00;
    --hosting-orange-soft: rgba(255, 106, 0, 0.08);
    --hosting-orange-ring: rgba(255, 106, 0, 0.22);
    --hosting-danger: #c93b3b;
    --hosting-danger-hover: #a82f2f;
    --hosting-success: #158458;
    --hosting-shadow: 0 18px 48px rgba(23, 32, 51, 0.10);
    color: var(--hosting-text);
}

/*
 * Shared list-page typography contract.
 * File Manager intentionally stays outside this contract: it has its own
 * interaction model and visual density.
 */
.hestiacp-web-domains,
.hosting-dns-zones,
.hestiacp-mail,
.hestiacp-databases,
.hestiacp-ftp,
[data-hestia-cron-jobs],
[data-hestia-backups] {
    font-size: 14px;
    line-height: 1.4;
}

.hosting-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dark .hosting-ui {
    --hosting-bg: #10131b;
    --hosting-surface: #10131b;
    --hosting-surface-soft: #171c27;
    --hosting-surface-muted: #171b25;
    --hosting-text: #f4f6fb;
    --hosting-muted: #a5acba;
    --hosting-border: oklch(100% 0 0 / 0.16);
    --hosting-border-strong: oklch(100% 0 0 / 0.24);
    --hosting-focus-border: #a8afbd;
    --hosting-focus-ring: transparent;
    --hosting-orange-soft: rgba(255, 106, 0, 0.14);
    --hosting-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

.hosting-ui.hosting-panel,
.hosting-ui.hosting-card,
.hosting-ui.hosting-table-card,
.hosting-panel,
.hosting-card,
.hosting-table-card {
    overflow: hidden;
    color: var(--hosting-text);
    border: 1px solid var(--hosting-border);
    border-radius: 0;
    background: var(--hosting-surface);
}

.hosting-panel__header,
.hosting-card__header {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid oklch(0.89 0.01 0);
    background-image: url('/extensions/hestiacp-static/img/sites-eco-bg.webp');
    background-position: center 74%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.hosting-panel__header {
    box-sizing: border-box;
    height: 74px;
}

.hosting-panel__header::before,
.hosting-card__header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .58) 42%, rgba(255, 255, 255, .12) 100%);
}

.hosting-panel__header > *,
.hosting-card__header > * {
    position: relative;
    z-index: 1;
}

.hosting-panel__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Every resource header reserves the same two-line title block.
     * Sites uses a compact account/meta line instead of the standard
     * subtitle, so without this floor its icon sits 1–2px higher. */
    min-height: 45.1px;
    min-width: 0;
}

.hosting-panel__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--hosting-orange);
    border: 1px solid var(--hosting-border-strong);
    border-radius: var(--hosting-radius-lg);
}

.hosting-panel__header-icon .hosting-icon {
    width: 24px;
    height: 24px;
}

/* Keep the title block in its existing position, but center only the
 * right-side header action such as the shared Refresh button. */
@media (min-width: 761px) {
    .hosting-panel__header > .hosting-row-actions,
    .hosting-panel__header > [class*="header-actions"],
    .hosting-card__header > .hosting-row-actions,
    .hosting-card__header > [class*="header-actions"] {
        align-self: center;
    }
}

.hosting-panel__title,
.hosting-card__title {
    margin: 0;
    color: var(--hosting-text);
    font-size: var(--hosting-panel-title-size);
    line-height: var(--hosting-panel-title-line-height);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.hosting-panel__subtitle,
.hosting-card__subtitle {
    margin: 6px 0 0;
    color: var(--hosting-muted);
    font-size: var(--hosting-panel-subtitle-size);
    line-height: var(--hosting-panel-subtitle-line-height);
}

.hosting-panel__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hosting-muted);
    font-size: 12px;
}

/* Shared service-overview card language. */
.hosting-overview-resource-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.hosting-overview-resource__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hosting-overview-resource__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--hosting-orange);
    border: 1px solid var(--hosting-border-strong);
    border-radius: var(--hosting-radius-lg);
}

.hosting-overview-resource__icon .hosting-icon {
    width: 18px;
    height: 18px;
}

.hosting-overview-resource__title {
    color: var(--hosting-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.hosting-overview-resource__value {
    margin-top: 3px;
    color: var(--hosting-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.hosting-overview-resource__value span {
    color: var(--hosting-muted);
    font-weight: 600;
}

.hosting-overview-resource__caption {
    width: 100%;
    margin-top: 10px;
    color: var(--hosting-muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
}

.hosting-overview-resource {
    display: flex;
    flex-direction: column;
    border-radius: var(--hosting-radius-xl);
}

.hosting-overview-resource__progress {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--hosting-surface-soft);
}

.hosting-overview-resource__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 30px;
    margin-top: 12px;
    padding: 5px 2px;
    color: var(--hosting-orange-hover);
    border: 0;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.hosting-overview-resource__action .hosting-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.hosting-overview-resource__action:hover,
.hosting-overview-resource__action:focus-visible {
    color: #d95700;
    background: transparent;
}

@media (min-width: 640px) {
    .hosting-overview-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hosting-overview-resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .hosting-overview-resource-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

/* Compact stacked overview. Typography and colors share the hosting UI tokens. */
.hosting-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(320px, 1fr);
    align-items: start;
    gap: 24px;
}

.hosting-overview-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin-inline: 0 auto;
}

.hosting-dashboard-widgets {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.hosting-dashboard-widget {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.hosting-dashboard-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hosting-dashboard-widget__heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.hosting-dashboard-widget__heading h2 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--hosting-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hosting-dashboard-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--hosting-text);
    border: 1px solid var(--hosting-border-strong);
    border-radius: var(--hosting-radius-lg);
    background: var(--hosting-surface-muted);
}

.hosting-dashboard-widget__icon svg {
    width: 18px;
    height: 18px;
}

.hosting-dashboard-widget__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #fff;
    background: var(--hosting-orange);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.hosting-dashboard-widget__view-all svg {
    width: 16px;
    height: 16px;
}

.hosting-dashboard-widget__items {
    min-width: 0;
}

.hosting-dashboard-widget__items > .space-y-4 {
    display: grid;
    gap: 8px;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div {
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: var(--hosting-radius-lg);
}

/* Keep an active service compact: all service metadata shares one row. */
.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div {
    display: grid;
    grid-template-columns: 30px max-content minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: 8px;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > div {
    display: contents;
    margin: 0;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child {
    display: contents;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child > div {
    grid-column: 1;
    grid-row: 1;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child > span {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > p {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hosting-dashboard-widget:first-child .hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:last-child {
    grid-column: 4;
    grid-row: 1;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > div {
    gap: 8px;
    margin-bottom: 6px;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child {
    min-width: 0;
    gap: 8px;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child > div {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 5px;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:first-child > span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.25;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > div > div:last-child {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.hosting-dashboard-widget__items > .space-y-4 > a > div > p {
    margin: 0;
    color: var(--hosting-muted);
    font-size: 10px;
    line-height: 1.35;
}

.hosting-dashboard-widget__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    gap: 4px;
    padding: 5px 8px;
    color: var(--hosting-text);
    border: 1px solid var(--hosting-border-strong);
    border-radius: var(--hosting-radius-lg);
    background: var(--hosting-surface-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 650;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
}

.hosting-dashboard-widget__view-all:hover,
.hosting-dashboard-widget__view-all:focus-visible {
    border-color: var(--hosting-orange-ring);
    background: var(--hosting-orange-soft);
}

.hosting-dashboard-widget__empty {
    display: flex;
    min-height: 132px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    border-radius: var(--hosting-radius-xl);
    background: color-mix(in srgb, var(--hosting-surface-soft) 48%, var(--hosting-surface));
    text-align: center;
}

.hosting-dashboard-widget__empty-icon {
    width: 38px;
    height: 38px;
    color: var(--hosting-muted);
}

.hosting-dashboard-widget__empty strong {
    color: var(--hosting-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
}

.hosting-dashboard-widget__empty p {
    margin: 0;
    color: var(--hosting-muted);
    font-size: 12px;
    line-height: 1.35;
}

.hosting-plan-required {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 220px;
    padding: 28px 20px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-xl);
    background: color-mix(in srgb, var(--hosting-surface-soft) 42%, var(--hosting-surface));
    color: var(--hosting-text);
    text-align: center;
}

.hosting-plan-required--compact {
    min-height: 150px;
    padding: 22px 18px;
}

.hosting-plan-required__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--hosting-orange);
    border: 1px solid var(--hosting-orange-ring);
    border-radius: 12px;
    background: var(--hosting-orange-soft);
}

.hosting-plan-required__icon svg {
    width: 20px;
    height: 20px;
}

.hosting-plan-required__title {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

.hosting-plan-required__description {
    max-width: 480px;
    margin: 0;
    color: var(--hosting-muted);
    font-size: 13px;
    line-height: 1.4;
}

.hosting-plan-required__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 4px;
    padding: 7px 12px;
    border-radius: var(--hosting-control-compact-radius);
    color: #fff;
    background: var(--hosting-orange);
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
    text-decoration: none;
}

.hosting-plan-required__action:hover,
.hosting-plan-required__action:focus-visible {
    background: var(--hosting-orange-hover);
}

.hosting-plan-required__action svg {
    width: 15px;
    height: 15px;
}

.hosting-overview-card {
    min-width: 0;
    padding: 16px 18px;
    border-radius: var(--hosting-radius-xl);
    background: var(--hosting-surface);
    container-type: inline-size;
}

.hosting-overview-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hosting-overview-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--hosting-orange);
    border: 1px solid var(--hosting-orange-ring);
    border-radius: var(--hosting-radius-lg);
    background: color-mix(in srgb, var(--hosting-orange) 4%, var(--hosting-surface));
}

.hosting-overview-card__icon .hosting-icon {
    width: 22px;
    height: 22px;
}

.hosting-overview-card__title {
    margin: 0;
    color: var(--hosting-text);
    font-size: 14px;
    line-height: var(--hosting-panel-title-line-height);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hosting-overview-card__identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hosting-border);
}

.hosting-overview-card__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--hosting-text);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.hosting-overview-card__name-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hosting-overview-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-muted);
    opacity: 0;
}

.hosting-overview-card__identity:hover .hosting-overview-card__edit,
.hosting-overview-card__edit:focus-visible {
    opacity: 1;
}

.hosting-overview-card__edit:focus-visible {
    outline: 2px solid var(--hosting-orange);
    outline-offset: 2px;
}

.hosting-overview-card__edit .hosting-icon {
    width: 16px;
    height: 16px;
}

.hosting-overview-card__status {
    flex: 0 0 auto;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    line-height: var(--hosting-line-height-secondary);
    font-weight: 650;
}

.hosting-overview-card__status--active {
    color: #258b39;
    background: color-mix(in srgb, #99f4ac 32%, var(--hosting-surface));
}

.hosting-overview-card__status--cancelled {
    color: var(--hosting-danger);
    background: color-mix(in srgb, var(--hosting-danger) 10%, var(--hosting-surface));
}

.hosting-overview-card__status--pending {
    color: var(--hosting-orange-hover);
    background: var(--hosting-orange-soft);
}

.dark .hosting-overview-card__status--active {
    color: #93e9aa;
    background: color-mix(in srgb, var(--hosting-success) 22%, var(--hosting-surface));
}

.hosting-overview-card__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.hosting-overview-card__fact {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    padding-inline: 12px;
    color: var(--hosting-text);
    font-size: 12px;
    line-height: var(--hosting-line-height-secondary);
    font-weight: 650;
}

.hosting-overview-card__fact:first-child {
    padding-left: 0;
}

.hosting-overview-card__fact:last-child {
    padding-right: 0;
}

.hosting-overview-card__fact + .hosting-overview-card__fact {
    border-left: 1px solid var(--hosting-border);
}

.hosting-overview-card__fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--hosting-muted);
    border-radius: var(--hosting-radius-md);
    background: var(--hosting-surface-soft);
}

.hosting-overview-card__fact-icon .hosting-icon {
    width: 18px;
    height: 18px;
}

.hosting-overview-card__fact--urgent {
    color: var(--hosting-orange-hover);
}

.hosting-overview-card__extra {
    margin-top: 12px;
    font-size: var(--hosting-font-size-secondary);
    line-height: var(--hosting-line-height-secondary);
}

.hosting-overview-card__extra:empty {
    display: none;
}

.hosting-overview-card--disk {
    padding: 12px 14px 16px;
    border-color: color-mix(in srgb, var(--hosting-orange) 10%, var(--hosting-surface));
    background: color-mix(in srgb, var(--hosting-orange) 4.5%, var(--hosting-surface));
}

.hosting-overview-card__disk-main {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 126px;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.hosting-overview-card__donut {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.hosting-overview-card__donut > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hosting-overview-card__donut-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.hosting-overview-card__donut-value {
    color: var(--hosting-text);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 750;
}

.hosting-overview-card__summary {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.hosting-overview-card__summary-value {
    color: var(--hosting-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.hosting-overview-card__summary-label {
    margin-top: 3px;
    color: var(--hosting-muted);
    font-size: 10px;
    line-height: var(--hosting-line-height-secondary);
}

.hosting-overview-card__disk-art {
    position: relative;
    align-self: start;
    width: 100%;
    aspect-ratio: 1;
}

.hosting-overview-card__disk-art::before {
    position: absolute;
    inset: 0;
    content: '';
    border-radius: 50%;
    background: color-mix(in srgb, var(--hosting-muted) 7%, var(--hosting-surface-soft));
}

.hosting-overview-card__disk-illustration {
    position: absolute;
    top: -14%;
    left: -14%;
    width: 128%;
    max-width: none;
    height: 128%;
    object-fit: contain;
}

.hosting-overview-card__disk-badge {
    position: absolute;
    top: 32%;
    left: -7%;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--hosting-text);
    background: var(--hosting-surface-soft);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    white-space: nowrap;
}

.hosting-overview-card__disk-progress {
    height: 8px;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--hosting-surface-soft);
}

.hosting-overview-card__disk-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hosting-orange);
}

@container (max-width: 380px) {
    .hosting-overview-card__title { font-size: 14px; }
    .hosting-overview-card__name { font-size: 14px; }
    .hosting-overview-card__status { padding: 5px 10px; font-size: 12px; }
    .hosting-overview-card__fact { gap: 4px; padding-inline: 6px; font-size: 11px; }
    .hosting-overview-card__fact-icon { flex-basis: 20px; width: 20px; height: 20px; }
    .hosting-overview-card__fact-icon .hosting-icon { width: 15px; height: 15px; }
    .hosting-overview-card__disk-main { grid-template-columns: 84px minmax(0, 1fr) 86px; gap: 8px; }
    .hosting-overview-card__donut-value { font-size: 22px; }
    .hosting-overview-card__summary { gap: 14px; }
    .hosting-overview-card__summary-value { font-size: 15px; }
    .hosting-overview-card__summary-label { font-size: 11px; }
    .hosting-overview-card__disk-badge { padding: 7px 12px; font-size: 12px; }
}

@media (hover: none) {
    .hosting-overview-card__edit { opacity: 1; }
}

@media (max-width: 760px) {
    .hosting-overview-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hosting-panel__title,
    .hosting-card__title {
        font-size: var(--hosting-panel-title-size);
    }

    .hosting-panel__header,
    .hosting-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .hosting-toolbar__actions,
    .hosting-toolbar__group {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .hosting-empty {
        min-height: 300px;
    }
}

.dark .hosting-panel__header,
.dark .hosting-card__header {
    background-image: none;
}

.dark .hosting-panel__header::before,
.dark .hosting-card__header::before {
    display: block;
    background:
        radial-gradient(ellipse at 18% 50%, rgba(255, 106, 0, .13) 0%, rgba(255, 106, 0, .04) 34%, transparent 68%),
        linear-gradient(90deg, #171c27 0%, #141923 55%, #10131b 100%);
}

.dark .hosting-ui.hosting-panel,
.dark .hosting-ui.hosting-card,
.dark .hosting-ui.hosting-table-card,
.dark .hosting-panel,
.dark .hosting-card,
.dark .hosting-table-card {
    border-radius: 0;
}

.hosting-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--hosting-border);
    background: var(--hosting-surface-soft);
    font-size: 14px;
    line-height: 1.2;
}

.hosting-select-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    padding: 16px;
    border-bottom: 1px solid var(--hosting-border);
    background: var(--hosting-surface);
}

.hosting-select-row__field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.hosting-select-row__label {
    color: var(--hosting-text);
    font-size: var(--hosting-font-size-control);
    font-weight: 600;
    line-height: 1.2;
}

.hosting-select-row__control {
    position: relative;
    min-width: 0;
}

.hosting-select.hosting-select-row__select {
    min-height: 42px;
    padding: 0 38px 0 12px;
    border-color: color-mix(in srgb, var(--hosting-border) 82%, transparent);
    border-radius: var(--hosting-radius-md);
    background: var(--hosting-bg);
    appearance: none;
    font-size: var(--hosting-font-size-control);
}

.hosting-select.hosting-select-row__select:focus {
    border-color: var(--hosting-focus-border);
    box-shadow: none;
}

.hosting-select-row__chevron {
    position: absolute;
    top: 50%;
    right: 12px;
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    transform: translateY(-50%);
    color: var(--hosting-muted);
    pointer-events: none;
}

.hosting-select.hosting-select-row__select:disabled + .hosting-select-row__chevron {
    color: var(--hosting-muted);
}

.hosting-expression-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--hosting-border);
    background: var(--hosting-surface);
}

.hosting-expression-field {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.hosting-expression-field__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hosting-muted);
    font-size: var(--hosting-font-size-control);
    font-weight: 650;
    line-height: 1.2;
}

.hosting-expression-field__icon {
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
}

.hosting-input.hosting-expression-field__input {
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--hosting-muted) 58%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 650;
}

.hosting-input.hosting-expression-field__input:focus {
    border-bottom-color: var(--hosting-focus-border);
    box-shadow: none;
}

@media (max-width: 760px) {
    .hosting-select-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hosting-expression-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .hosting-select-row {
        grid-template-columns: 1fr;
    }

    .hosting-expression-grid {
        grid-template-columns: 1fr;
    }
}

.hosting-toolbar__actions,
.hosting-toolbar__group,
.hosting-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hosting-toolbar__actions {
    justify-content: flex-start;
}

.hosting-toolbar__group {
    margin-left: auto;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
}

.hosting-row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
}

.hosting-row-actions > .hosting-btn {
    min-height: var(--hosting-control-compact-height);
    padding: 0 var(--hosting-control-compact-padding-inline);
    border-radius: var(--hosting-control-compact-radius);
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-control);
}

.hosting-row-actions > .hosting-icon-btn {
    width: var(--hosting-control-compact-height);
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    border-radius: var(--hosting-control-compact-radius);
}

.hosting-btn,
.hosting-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hosting-control-compact-gap);
    min-height: var(--hosting-control-compact-height);
    padding: 0 var(--hosting-control-compact-padding-inline);
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-control-compact-radius);
    color: var(--hosting-text);
    background: var(--hosting-bg);
    font-family: inherit;
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-control);
    line-height: var(--hosting-line-height-control);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.hosting-btn > svg,
.hosting-btn > i,
.hosting-icon-btn > svg,
.hosting-icon-btn > i {
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    flex: 0 0 var(--hosting-control-compact-icon-size);
}

.hosting-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.hosting-btn.hosting-choice-card {
    justify-content: flex-start;
    min-width: 0;
    min-height: 68px;
    height: auto;
    padding: 12px;
    gap: 8px;
    color: var(--hosting-text);
    border-color: rgba(102, 114, 138, .18);
    border-radius: 12px;
    background: var(--hosting-surface);
    text-align: left;
    white-space: normal;
}

.hosting-choice-card__icon {
    width: 18px;
    height: 18px;
    color: var(--hosting-muted);
}

.hosting-choice-card__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.hosting-choice-card__title {
    font-size: var(--hosting-font-size-control);
    font-weight: 750;
    line-height: 1.2;
}

.hosting-choice-card__subtitle {
    color: var(--hosting-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.hosting-btn.hosting-choice-card:hover,
.hosting-btn.hosting-choice-card:focus-visible {
    color: var(--hosting-text);
    border-color: var(--hosting-border-strong);
    background: var(--hosting-surface-muted);
}

.hosting-btn.hosting-choice-card.hosting-btn--primary,
.hosting-btn.hosting-choice-card.hosting-btn--primary:hover,
.hosting-btn.hosting-choice-card.hosting-btn--primary:focus-visible {
    color: var(--hosting-orange);
    border-color: var(--hosting-border-strong);
    background: var(--hosting-orange-soft);
}

.hosting-btn.hosting-choice-card.hosting-btn--primary .hosting-choice-card__icon,
.hosting-btn.hosting-choice-card.hosting-btn--primary .hosting-choice-card__subtitle {
    color: var(--hosting-orange);
}

@media (max-width: 1100px) {
    .hosting-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .hosting-choice-grid {
        grid-template-columns: 1fr;
    }

    .hosting-btn.hosting-choice-card {
        min-height: 72px;
    }
}

.hosting-btn--sm {
    min-height: var(--hosting-control-compact-height);
    padding: 0 var(--hosting-control-compact-padding-inline);
    border-radius: var(--hosting-control-compact-radius);
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-control);
}

.hosting-icon-btn {
    width: var(--hosting-control-compact-height);
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    padding: 0;
}

.hosting-icon-btn--sm {
    width: var(--hosting-control-compact-height);
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    border-radius: var(--hosting-control-compact-radius);
}

/* Keep every row action menu trigger identical across hosting tabs. */
.hosting-icon-btn[data-menu-toggle],
.hosting-icon-btn[data-domain-menu-toggle],
.hosting-icon-btn[data-cron-menu-toggle],
.hosting-icon-btn[data-backups-menu-toggle] {
    width: var(--hosting-control-compact-height);
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    padding: 0;
    border-radius: var(--hosting-control-compact-radius);
}

.hosting-icon-btn[data-menu-toggle] > svg,
.hosting-icon-btn[data-menu-toggle] > i,
.hosting-icon-btn[data-domain-menu-toggle] > svg,
.hosting-icon-btn[data-domain-menu-toggle] > i,
.hosting-icon-btn[data-cron-menu-toggle] > svg,
.hosting-icon-btn[data-cron-menu-toggle] > i,
.hosting-icon-btn[data-backups-menu-toggle] > svg,
.hosting-icon-btn[data-backups-menu-toggle] > i {
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    flex: 0 0 var(--hosting-control-compact-icon-size);
}

.hosting-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
    padding: 0;
    color: color-mix(in srgb, var(--hosting-muted) 78%, transparent);
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: 2px;
    transition: color .15s ease, background-color .15s ease;
}

.hosting-inline-action .hosting-icon {
    width: 14px;
    height: 14px;
}

/* Shared domain cell contract used by Sites and DNS. */
:where(.hestiacp-web-domains, .hosting-dns-zones) .hosting-domain-row {
    display: inline-flex;
    max-width: 100%;
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    align-items: center;
    gap: 8px;
    line-height: var(--hosting-line-height-table);
}

.hosting-inline-action:hover,
.hosting-inline-action:focus-visible {
    color: var(--hosting-orange);
    background: var(--hosting-orange-soft);
}

.hosting-inline-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hosting-orange-ring);
}

.hosting-modal .hosting-inline-action {
    width: 28px;
    height: 28px;
    min-height: 28px;
    flex: 0 0 28px;
    top: 0;
}

.hosting-modal .hosting-inline-action .hosting-icon {
    width: 16px;
    height: 16px;
}

.hosting-status-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    color: var(--hosting-muted);
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: color .15s ease, opacity .15s ease;
}

.hosting-status-action:hover,
.hosting-status-action:focus-visible {
    color: var(--hosting-text);
}

.hosting-status-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hosting-orange-ring);
}

.hosting-panel__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hosting-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid rgba(102, 112, 138, .22);
    border-radius: 999px;
    color: var(--hosting-muted);
    background: var(--hosting-surface-muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.hosting-panel__count.is-loading {
    color: transparent;
}

.hosting-panel__count.is-loading::after {
    width: 8px;
    height: 8px;
    border: 1.5px solid color-mix(in srgb, var(--hosting-muted) 32%, transparent);
    border-top-color: var(--hosting-orange);
    border-radius: 50%;
    content: '';
    animation: hosting-refresh-spin .8s linear infinite;
}

.hosting-btn:hover,
.hosting-icon-btn:hover {
    border-color: var(--hosting-border-strong);
    background: var(--hosting-surface-muted);
}

.hosting-btn.hosting-btn--refresh {
    min-height: 38px;
    padding: 0 15px;
    border-color: rgb(255 255 255 / .78);
    border-radius: 999px;
    background: rgb(255 255 255 / .28);
    backdrop-filter: blur(7px);
}

.hosting-btn.hosting-btn--refresh:hover {
    border-color: rgb(255 255 255 / .95);
    background: rgb(255 255 255 / .48);
}

@keyframes hosting-refresh-spin {
    to { transform: rotate(360deg); }
}

.hosting-btn.is-loading {
    cursor: wait;
    opacity: .65;
    pointer-events: none;
}

.hosting-btn.is-loading .hosting-btn__icon,
.hosting-btn.is-loading > svg,
.hosting-btn.is-loading > i {
    animation: hosting-refresh-spin .8s linear infinite;
}

.hosting-btn:focus-visible,
.hosting-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hosting-orange-ring);
}

.hosting-btn:disabled,
.hosting-icon-btn:disabled,
.hosting-btn.is-disabled,
.hosting-icon-btn.is-disabled {
    cursor: not-allowed;
    opacity: .58;
}

.hosting-btn--primary {
    color: #ffffff;
    height: var(--hosting-primary-height);
    min-height: var(--hosting-primary-height);
    padding: 1px var(--hosting-primary-padding-inline);
    border: 0;
    border-radius: var(--hosting-primary-radius);
    background: var(--hosting-primary-bg);
    background-image: linear-gradient(to bottom, var(--hosting-primary-gradient-start), var(--hosting-primary-gradient-end));
    font-size: var(--hosting-primary-font-size);
    font-weight: var(--hosting-primary-font-weight);
    line-height: var(--hosting-primary-line-height);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--hosting-primary-ring), inset 0 1px 0 0 var(--hosting-primary-bg), var(--hosting-primary-shadow);
}

.hosting-btn--primary:hover {
    color: #ffffff;
    border-color: transparent;
    background: var(--hosting-primary-bg);
    background-image: linear-gradient(to bottom, var(--hosting-primary-gradient-hover-start), var(--hosting-primary-gradient-end));
    box-shadow: 0 0 0 1px var(--hosting-primary-ring), inset 0 1px 0 0 var(--hosting-primary-bg), var(--hosting-primary-shadow);
}

.hosting-btn--primary:active {
    box-shadow: 0 0 0 1px var(--hosting-primary-ring), inset 0 1px 0 0 var(--hosting-primary-bg), var(--hosting-primary-shadow);
}

.hosting-btn--primary:focus-visible {
    color: #ffffff;
    border-color: transparent;
    background: var(--hosting-primary-bg);
    background-image: linear-gradient(to bottom, var(--hosting-primary-gradient-start), var(--hosting-primary-gradient-end));
    box-shadow: 0 0 0 3px var(--hosting-orange-ring), 0 0 0 1px var(--hosting-primary-ring), inset 0 1px 0 0 var(--hosting-primary-bg), var(--hosting-primary-shadow);
}

.hosting-btn.hosting-choice-card.hosting-btn--primary {
    border: 1px solid var(--hosting-border-strong);
    background-image: none;
    box-shadow: none;
    transform: none;
}

.hosting-btn.hosting-choice-card.hosting-btn--primary:hover,
.hosting-btn.hosting-choice-card.hosting-btn--primary:focus-visible,
.hosting-btn.hosting-choice-card.hosting-btn--primary:active {
    background-image: none;
    box-shadow: none;
    transform: none;
}

.hosting-btn--secondary {
    color: var(--hosting-text);
    border-color: var(--hosting-border);
    background: var(--hosting-bg);
}

.hosting-btn--danger {
    color: #ffffff;
    border-color: var(--hosting-danger);
    background: var(--hosting-danger);
}

.hosting-btn--danger:hover,
.hosting-btn--danger:focus-visible {
    color: #ffffff;
    border-color: var(--hosting-danger-hover);
    background: var(--hosting-danger-hover);
}

.hosting-btn--ghost {
    color: var(--hosting-orange);
    border-color: transparent;
    background: transparent;
}

.hosting-btn--ghost:hover,
.hosting-btn--ghost:focus-visible {
    color: var(--hosting-orange-hover);
    border-color: var(--hosting-border);
    background: var(--hosting-orange-soft);
}

.hosting-search {
    display: inline-flex;
    align-items: center;
    flex: 0 0 240px;
    gap: var(--hosting-control-compact-gap);
    min-height: var(--hosting-control-compact-height);
    width: min(240px, 100%);
    min-width: 0;
    max-width: 240px;
    padding: 0 var(--hosting-control-compact-padding-inline);
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-muted);
    background: var(--hosting-bg);
    font-size: var(--hosting-font-size-control);
    line-height: var(--hosting-line-height-control);
}

.hosting-search:focus-within {
    border-color: var(--hosting-border-strong);
    box-shadow: none;
}

.hosting-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--hosting-text);
    background: transparent;
    font: inherit;
}

.hosting-search button {
    display: inline-flex;
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    padding: 0;
    border: 0;
    align-items: center;
    justify-content: center;
    color: var(--hosting-muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.hosting-search button:hover,
.hosting-search button:focus-visible {
    color: var(--hosting-text);
}

.hosting-search button[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .hosting-search {
        width: 100%;
        max-width: none;
        flex: 1 1 240px;
    }
}

.hosting-input,
.hosting-select,
.hosting-textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-text);
    background: var(--hosting-bg);
    font: inherit;
    font-size: var(--hosting-font-size-control);
    line-height: 1.2;
}

.hosting-input,
.hosting-select {
    padding: 0 12px;
}

.hosting-textarea {
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

.hosting-input:focus,
.hosting-select:focus,
.hosting-textarea:focus {
    outline: none;
    border-color: var(--hosting-focus-border);
    box-shadow: none;
}

.hosting-select:disabled {
    color: var(--hosting-muted);
    border-color: color-mix(in srgb, var(--hosting-muted) 30%, transparent);
    background: var(--hosting-surface-muted);
    cursor: not-allowed;
    opacity: 1;
}

.hosting-input-group {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    background: var(--hosting-bg);
}

.hosting-input-group:focus-within {
    border-color: var(--hosting-focus-border);
    box-shadow: none;
}

.hosting-input-group .hosting-input {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hosting-input-group__prefix,
.hosting-input-group__suffix {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 var(--hosting-control-compact-padding-inline);
    color: var(--hosting-muted);
    background: var(--hosting-surface-soft);
    font-size: var(--hosting-font-size-control);
    line-height: var(--hosting-line-height-control);
    font-weight: 650;
    white-space: nowrap;
}

.hosting-input-group__prefix {
    border-right: 1px solid var(--hosting-border);
}

.hosting-input-group__suffix {
    border-left: 1px solid var(--hosting-border);
}

.hosting-password-field {
    position: relative;
    display: block;
    width: 100%;
}

.hosting-password-field .hosting-input {
    padding-right: 86px;
}

.hosting-password-field__actions {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    transform: translateY(-50%);
}

.hosting-password-field__actions button,
.hosting-copy-row button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--hosting-radius-sm);
    color: var(--hosting-muted);
    background: transparent;
    cursor: pointer;
}

.hosting-password-field__actions button:hover,
.hosting-password-field__actions button:focus-visible,
.hosting-copy-row button:hover,
.hosting-copy-row button:focus-visible {
    color: var(--hosting-text);
    background: var(--hosting-surface-muted);
    outline: 0;
}

.hosting-password-field__actions svg {
    width: 17px;
    height: 17px;
}

.hosting-copy-list {
    display: grid;
    gap: 8px;
}

.hosting-copy-row {
    display: grid;
    grid-template-columns: minmax(92px, 115px) minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-text);
    background: var(--hosting-bg);
    font-size: var(--hosting-font-size-control);
    line-height: var(--hosting-line-height-control);
}

.hosting-copy-row code {
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
}

.hosting-copy-row--split {
    grid-template-columns: minmax(150px, 170px) minmax(0, 1fr) 34px;
    min-height: 42px;
    gap: 8px;
    padding: 5px 0;
    border: 0;
    border-bottom: 1px solid var(--hosting-border);
    border-radius: 0;
    background: transparent;
}

.hosting-copy-row--split:last-child {
    border-bottom: 0;
}

.hosting-copy-row--split > strong,
.hosting-copy-row--split > b {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--hosting-font-weight-form-control);
    line-height: 1.25;
}

.hosting-copy-row--split > code {
    display: flex;
    grid-column: 2 / -1;
    grid-row: 1;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    padding: 5px 38px 5px 10px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-control-compact-radius);
    color: var(--hosting-text);
    background: var(--hosting-bg);
    line-height: var(--hosting-line-height-control);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hosting-copy-row--split > button {
    z-index: 1;
    grid-column: 3;
    grid-row: 1;
    width: 28px;
    height: 28px;
    margin-right: 3px;
    justify-self: end;
    color: var(--hosting-muted);
}

@media (max-width: 680px) {
    .hosting-copy-row--split {
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-rows: auto auto;
        min-height: 0;
        gap: 4px 8px;
        padding: 6px 0;
    }

    .hosting-copy-row--split > strong,
    .hosting-copy-row--split > b {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .hosting-copy-row--split > code {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .hosting-copy-row--split > button {
        grid-column: 2;
        grid-row: 2;
    }
}

.hosting-dropdown {
    padding: 4px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-control-compact-radius);
    background: var(--hosting-bg);
    box-shadow: var(--hosting-shadow);
}

.hosting-dropdown[data-menu] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    min-width: 176px;
}

.hosting-dropdown[data-menu][hidden] {
    display: none !important;
}

.hosting-dropdown[data-menu]::before,
.hosting-dropdown[data-menu]::after,
.hwd-row-menu.hosting-dropdown::before,
.hwd-row-menu.hosting-dropdown::after,
.hosting-dropdown[data-menu][data-placement="top"]::before,
.hosting-dropdown[data-menu][data-placement="top"]::after,
.hwd-row-menu.hosting-dropdown[data-placement="top"]::before,
.hwd-row-menu.hosting-dropdown[data-placement="top"]::after {
    position: absolute;
    left: var(--hosting-dropdown-pointer-left, 50%);
    width: 0;
    height: 0;
    content: '';
    transform: translateX(-50%);
}

.hosting-dropdown[data-menu]::before,
.hwd-row-menu.hosting-dropdown::before {
    top: -8px;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--hosting-border);
    border-left: 8px solid transparent;
}

.hosting-dropdown[data-menu]::after,
.hwd-row-menu.hosting-dropdown::after {
    top: -7px;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--hosting-bg);
    border-left: 7px solid transparent;
}

.hosting-dropdown[data-menu][data-placement="top"]::before,
.hwd-row-menu.hosting-dropdown[data-placement="top"]::before {
    bottom: -8px;
    border-top: 8px solid var(--hosting-border);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.hosting-dropdown[data-menu][data-placement="top"]::after,
.hwd-row-menu.hosting-dropdown[data-placement="top"]::after {
    bottom: -7px;
    border-top: 7px solid var(--hosting-bg);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.hosting-dropdown button,
.hosting-dropdown a {
    display: flex;
    width: 100%;
    min-height: var(--hosting-control-compact-height);
    align-items: center;
    gap: var(--hosting-control-compact-gap);
    padding: 4px var(--hosting-control-compact-padding-inline);
    border: 0;
    border-radius: var(--hosting-control-compact-radius);
    color: color-mix(in srgb, var(--hosting-text) 74%, var(--hosting-muted));
    background: transparent;
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-control);
    line-height: var(--hosting-line-height-control);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hosting-dropdown button svg,
.hosting-dropdown a svg {
    flex: 0 0 auto;
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    stroke-width: 2;
}

.hosting-dropdown button:hover,
.hosting-dropdown a:hover {
    background: var(--hosting-surface-muted);
}

.hosting-dropdown .hosting-dropdown__danger,
.hosting-dropdown .danger,
.hosting-dropdown [data-danger="true"] {
    position: relative;
    margin-top: 4px;
    padding-top: 4px;
    border-radius: var(--hosting-control-compact-radius);
    color: var(--hosting-danger);
}

.hosting-dropdown .hosting-dropdown__danger::before,
.hosting-dropdown .danger::before,
.hosting-dropdown [data-danger="true"]::before {
    position: absolute;
    top: -4px;
    right: 0;
    left: 0;
    height: 1px;
    content: '';
    background: var(--hosting-border);
}

.hosting-dropdown .hosting-dropdown__danger:hover,
.hosting-dropdown .danger:hover,
.hosting-dropdown [data-danger="true"]:hover {
    background: color-mix(in srgb, var(--hosting-danger) 10%, transparent);
}

.hosting-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(19, 28, 45, 0.52);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

html:has(.hosting-modal-backdrop.is-open),
html:has(.hosting-modal-backdrop.open),
body:has(.hosting-modal-backdrop.is-open),
body:has(.hosting-modal-backdrop.open) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.hosting-modal-backdrop.is-open,
.hosting-modal-backdrop.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.hosting-modal {
    overflow: hidden;
    opacity: 0;
    transform: translateY(4px);
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-lg);
    color: var(--hosting-text);
    background: var(--hosting-bg);
    box-shadow: var(--hosting-shadow);
    font-size: var(--hosting-font-size-control);
    transition: opacity 120ms ease, transform 120ms ease;
}

.hosting-modal-backdrop.is-open .hosting-modal,
.hosting-modal-backdrop.open .hosting-modal {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .hosting-modal-backdrop,
    .hosting-modal {
        transition: none;
    }
}

.hosting-modal header,
.hosting-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

.hosting-modal header h3 {
    margin: 0;
    font-size: var(--hosting-modal-title-size);
    line-height: var(--hosting-modal-title-line-height);
    font-weight: 700;
}

.hosting-modal header {
    border-bottom: 1px solid var(--hosting-border);
}

.hosting-modal footer {
    justify-content: flex-end;
    border-top: 1px solid var(--hosting-border);
    background: var(--hosting-surface-soft);
}

.hosting-modal__header,
.hosting-modal__body,
.hosting-modal__footer {
    padding: 16px;
}

.hosting-modal footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger),
.hosting-modal__footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger) {
    border-color: transparent;
    background: linear-gradient(to bottom, #ffffff, #f7f9fc);
    box-shadow: 0 0 0 1px #d8e0eb, inset 0 1px 0 #ffffff;
}

.hosting-modal footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger):hover,
.hosting-modal__footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger):hover {
    border-color: transparent;
    background: linear-gradient(to bottom, #ffffff, #eef3f8);
    box-shadow: 0 0 0 1px #c3cfdd, inset 0 1px 0 #ffffff;
}

.hosting-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--hosting-border);
}

.hosting-modal__title {
    margin: 0;
    font-size: var(--hosting-modal-title-size);
    line-height: var(--hosting-modal-title-line-height);
    font-weight: 700;
}

/* Site deletion uses the same confirmation modal on the list and settings pages. */
.hwd-modal--delete {
    width: min(560px, 100%);
}

.hwd-modal--delete .hosting-modal__header,
.hwd-modal--delete .hosting-modal__body,
.hwd-modal--delete .hosting-modal__footer {
    padding: 18px 20px;
}

.hwd-modal--delete .hosting-modal__header {
    display: block;
}

.hwd-modal--delete .hosting-modal__title {
    line-height: 1.25;
}

.hwd-modal--delete .hosting-modal__body {
    gap: 12px;
}

.hwd-modal--delete .hosting-modal__footer {
    gap: 10px;
}

.hwd-modal--delete .hosting-modal__domain {
    margin-top: 0;
    padding: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.hosting-modal--backups-details .hosting-modal__body {
    font-size: var(--hosting-font-size-control);
    line-height: 1.35;
}

.hosting-modal--backups-details .hosting-restore-summary strong {
    font-size: 15px;
    line-height: 1.3;
}

.hosting-modal--backups-details .hosting-restore-summary .hosting-muted,
.hosting-modal--backups-details .hosting-callout,
.hosting-modal--backups-details .hosting-field,
.hosting-modal--backups-details .hosting-restore-section__title,
.hosting-modal--backups-details .hosting-check-field {
    font-size: var(--hosting-font-size-control);
}

.hosting-modal--backups-details .hosting-select {
    font-size: var(--hosting-font-size-control);
}

/* Keep the exclusions dialog a normal modal. Long directory lists scroll inside it. */
.hosting-modal--backups-exclusions {
    display: flex;
    flex-direction: column;
    width: min(860px, calc(100vw - 36px));
    max-height: min(680px, calc(100dvh - 36px));
}

.hosting-modal--backups-exclusions > form {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.hosting-modal--backups-exclusions .hosting-modal__body,
.hosting-modal--backups-exclusions,
.hosting-modal--backups-exclusions form,
.hosting-modal--backups-exclusions .hosting-exclusions,
.hosting-modal--backups-exclusions .hosting-exclusion-section,
.hosting-modal--backups-exclusions .hosting-exclusion-section__panel,
.hosting-modal--backups-exclusions .hosting-help,
.hosting-modal--backups-exclusions .hosting-exclusion-section__toggle,
.hosting-modal--backups-exclusions .hosting-exclusion-option,
.hosting-modal--backups-exclusions .hosting-check-field,
.hosting-modal--backups-exclusions .hosting-search,
.hosting-modal--backups-exclusions .hosting-btn {
    font-size: var(--hosting-font-size-control);
    line-height: 1.35;
}

.hosting-modal--backups-exclusions,
.hosting-modal--backups-exclusions form,
.hosting-modal--backups-exclusions .hosting-modal__body,
.hosting-modal--backups-exclusions .hosting-exclusions,
.hosting-modal--backups-exclusions .hosting-exclusion-section,
.hosting-modal--backups-exclusions .hosting-exclusion-section__panel {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.hosting-modal--backups-exclusions .hosting-modal__body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.hosting-modal--backups-exclusions .hosting-help {
    margin-bottom: 2px;
}

.hosting-modal--backups-exclusions .hosting-exclusion-section__toggle {
    min-height: 42px;
}

.hosting-modal--backups-exclusions .hosting-modal__footer > .hosting-btn {
    font-size: var(--hosting-primary-font-size);
}

.hosting-modal--backups-details .hosting-callout--warning .hosting-icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #b76552;
}

.hosting-modal--backups-details .hosting-callout--warning {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.hosting-modal--backups-details .hosting-callout--warning .hosting-callout__content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(242, 201, 109, .70);
    border-radius: var(--hosting-radius-xl);
    color: #805d0b;
    background: #fff8df;
}

.hosting-modal__footer--restore {
    justify-content: flex-start;
    align-items: center;
}

.hosting-modal__footer--restore .hosting-restore-confirm {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}

.hosting-modal__footer--restore .hosting-restore-confirm > span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hosting-modal__footer--restore .hosting-restore-confirm input[type='checkbox'] {
    margin-top: 1px;
}

.hosting-modal__body {
    display: grid;
    gap: 10px;
}

.hosting-modal__body > label {
    display: grid;
    gap: 6px;
    font-size: var(--hosting-font-size-control);
    font-weight: 600;
}

.hosting-help {
    margin: 0;
    color: var(--hosting-muted);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.hosting-muted {
    color: var(--hosting-muted);
}

.hosting-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--hosting-text);
    font-size: var(--hosting-font-size-control);
    font-weight: 600;
}

.hosting-field > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hosting-check-field {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
}

.hosting-check-field input[type='checkbox'] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--hosting-orange);
}

.hosting-restore-components {
    display: grid;
    gap: 12px;
}

.hosting-modal--backups-details .hosting-restore-components {
    margin-top: 8px;
}

.hosting-restore-section {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    background: var(--hosting-surface-soft);
}

.hosting-restore-section__title {
    color: var(--hosting-text);
    font-size: 14px;
    line-height: 1.25;
}

.hosting-restore-section__hint {
    margin: -2px 0 0;
    font-size: var(--hosting-font-size-secondary);
    line-height: 1.35;
}

.hosting-restore-summary {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--hosting-radius-md);
}

.hosting-restore-summary__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hosting-restore-summary__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--hosting-radius-md);
}

.hosting-restore-summary__icon .hosting-icon {
    width: 20px;
    height: 20px;
}

.hosting-restore-summary__copy {
    min-width: 0;
}

.hosting-restore-summary strong,
.hosting-restore-summary .hosting-muted {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.hosting-restore-summary strong {
    line-height: 1.35;
}

.hosting-restore-summary .hosting-muted {
    line-height: 1.45;
}

.hosting-exclusions {
    display: grid;
    gap: 8px;
}

.hosting-exclusion-section {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius-md);
    background: var(--hosting-surface);
}

/* A tooltip from the open section must be able to paint above its header and sibling sections. */
.hosting-exclusion-section.is-open {
    z-index: 20;
    overflow: visible;
}

.hosting-exclusion-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    color: var(--hosting-text);
    background: transparent;
    font: inherit;
    font-weight: var(--hosting-font-weight-control);
    text-align: left;
    cursor: pointer;
}

.hosting-exclusion-section__toggle:hover {
    background: var(--hosting-surface-muted);
}

.hosting-exclusion-section__title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.hosting-exclusion-section__title > .hosting-icon {
    width: 18px;
    height: 18px;
    color: var(--hosting-muted);
}

.hosting-exclusion-section__count {
    color: var(--hosting-primary-brand);
    font-size: var(--hosting-font-size-secondary);
    font-weight: var(--hosting-font-weight-control);
}

.hosting-exclusion-section__loading {
    width: 14px;
    height: 14px;
    border: 2px solid var(--hosting-border);
    border-top-color: var(--hosting-muted);
    border-radius: 50%;
    animation: hosting-spin .75s linear infinite;
}

.hosting-exclusion-section__chevron {
    width: 18px;
    height: 18px;
    color: var(--hosting-muted);
    transition: transform .15s ease;
}

.hosting-exclusion-section.is-open .hosting-exclusion-section__chevron {
    transform: rotate(180deg);
}

.hosting-exclusion-section__panel {
    padding: 0 12px 12px;
    border-top: 1px solid var(--hosting-border);
}

.hosting-exclusion-section__tools {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding-top: 10px;
}

.hosting-exclusion-section__search {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

.hosting-exclusion-section__select-all {
    flex: 0 0 auto;
    order: -1;
    white-space: nowrap;
}

.hosting-exclusion-options {
    display: grid;
    min-width: 0;
    gap: 2px;
    max-height: 190px;
    overflow-y: auto;
    padding-top: 8px;
}

.hosting-exclusion-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-text);
    font-size: var(--hosting-font-size-control);
    font-weight: 400;
    cursor: pointer;
}

.hosting-exclusion-option:hover {
    background: var(--hosting-surface-muted);
}

.hosting-exclusion-directory-option {
    cursor: pointer;
}

.hosting-exclusion-directory-option__choice {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    gap: 9px;
}

.hosting-exclusion-directory-option__choice > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hosting-exclusion-directory-option__choice > input[type='checkbox'] {
    flex: 0 0 auto;
}

.hosting-exclusion-directory-option.is-disabled {
    color: var(--hosting-muted);
    background: var(--hosting-surface-muted);
    cursor: not-allowed;
}

.hosting-exclusion-directory-option.is-disabled .hosting-exclusion-directory-option__choice {
    cursor: not-allowed;
    opacity: .58;
}

.hosting-exclusion-selected {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 6px;
    padding-top: 8px;
}

.hosting-exclusion-selected__badge {
    position: relative;
    min-width: 0;
    max-width: 100%;
    gap: 3px;
    padding-right: 4px;
    color: var(--hosting-muted);
}

.hosting-directory-tooltip {
    position: fixed;
    z-index: 10000;
    width: max-content;
    max-width: min(640px, calc(100vw - 24px));
    padding: 6px 8px;
    border-radius: 6px;
    color: #ffffff;
    background: #111827;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .22);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
}

.hosting-directory-tooltip[hidden] {
    display: none;
}

.hosting-directory-tooltip::after {
    position: absolute;
    left: var(--hosting-tooltip-arrow-left, 18px);
    width: 9px;
    height: 9px;
    background: #111827;
    content: '';
    transform: translateX(-50%) rotate(45deg);
}

.hosting-directory-tooltip[data-placement='top'] {
    transform: translateY(0);
}

.hosting-directory-tooltip[data-placement='top']::after {
    bottom: -4px;
}

.hosting-directory-tooltip[data-placement='bottom'] {
    transform: translateY(0);
}

.hosting-directory-tooltip[data-placement='bottom']::after {
    top: -4px;
}

.hosting-exclusion-selected__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: currentColor;
    background: transparent;
    cursor: pointer;
}

.hosting-exclusion-selected__remove:hover {
    color: var(--hosting-text);
    background: rgba(100, 116, 139, .14);
}

.hosting-exclusion-selected__remove .hosting-icon {
    width: 12px;
    height: 12px;
}

.hosting-exclusion-directory-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding-top: 8px;
    color: var(--hosting-muted);
    font-size: var(--hosting-font-size-secondary);
}

.hosting-exclusion-directory-nav .hosting-btn {
    min-height: 28px;
    height: 28px;
    padding: 1px 8px;
}

.hosting-exclusion-directory-nav [data-exclusions-directory-path] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hosting-exclusion-option input[type='checkbox'] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--hosting-primary-brand);
}

.hosting-exclusion-options__empty {
    margin: 0;
    padding: 8px 6px 2px;
    color: var(--hosting-muted);
    font-size: var(--hosting-font-size-secondary);
}

@media (max-width: 560px) {
    .hosting-exclusion-section__tools {
        align-items: stretch;
        flex-direction: column;
    }

    .hosting-exclusion-section__select-all {
        align-self: flex-start;
    }
}

.hosting-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--hosting-border);
    background: var(--hosting-surface-soft);
}

/* Cron's schedule page is a regular panel, so its action row should sit on
 * the same clean surface instead of looking like a modal footer. */
.hcron-schedule-page .hosting-modal__footer {
    background: transparent;
}

/* Cron uses the same inline editor interaction as DNS records. The editor is
 * mounted inside the table row so opening it never replaces the list page. */
[data-hestia-cron-jobs] [data-cron-editor-row] > td {
    padding: 0 !important;
    border-left: 3px solid var(--hosting-primary-brand, #2563eb);
    background: var(--hosting-surface, #fff);
}

[data-hestia-cron-jobs] .hcron-inline-editor {
    overflow: hidden;
    background: var(--hosting-surface-soft);
    animation: hosting-inline-editor-open 180ms ease-out both;
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-select-row,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-expression-grid {
    background: transparent;
}

[data-hestia-cron-jobs] [data-cron-editor-row].is-closing .hcron-inline-editor {
    animation: hosting-inline-editor-close 180ms ease-in both;
}

[data-hestia-cron-jobs] .hcron-inline-editor__form {
    display: block;
}

[data-hestia-cron-jobs] .hcron-inline-editor__form .hosting-modal__body {
    padding: 16px 20px 0;
    background: transparent;
}

[data-hestia-cron-jobs] .hcron-inline-editor__form .hosting-modal__footer {
    padding: 12px 20px 16px;
    background: transparent;
}

/*
 * Cron keeps its existing inline layout, but its form typography follows the
 * same quiet Cloudflare-style hierarchy as the DNS inline editor: labels and
 * values are regular weight, while the shared button contract still controls
 * action emphasis.
 */
[data-hestia-cron-jobs] .hcron-inline-editor,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-modal__body {
    font-family: inherit;
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-field,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-modal__body > label,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-select-row__label,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-expression-field__label,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-choice-card__title {
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-form-label);
    line-height: 1.2;
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-choice-card__subtitle {
    font-size: var(--hosting-font-size-secondary);
    font-weight: var(--hosting-font-weight-form-control);
    line-height: var(--hosting-line-height-secondary);
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-input,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-select,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-textarea,
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-expression-field__input {
    font-family: inherit;
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-form-control);
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-expression-field__input {
    line-height: var(--hosting-line-height-control);
}

/* Focus changes only advanced field label/icon color; the main schedule row,
 * values and underlines keep their neutral control styling. */
[data-hestia-cron-jobs] .hcron-inline-editor .hosting-expression-field:focus-within .hosting-expression-field__label {
    color: var(--hosting-orange);
}

[data-hestia-cron-jobs] .hcron-advanced {
    margin-inline: -20px;
    padding-inline: 20px;
    border-top: 1px solid var(--hosting-border);
}

[data-hestia-cron-jobs] .hcron-inline-editor .hosting-select-row {
    border-bottom: 0;
}

[data-hestia-cron-jobs] .hcron-advanced__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--hosting-control-compact-gap);
    min-height: 36px;
    padding: 0;
    border: 0;
    color: var(--hosting-muted);
    background: transparent;
    font: inherit;
    font-size: var(--hosting-font-size-control);
    font-weight: var(--hosting-font-weight-form-control);
    line-height: var(--hosting-line-height-control);
    cursor: pointer;
}

[data-hestia-cron-jobs] .hcron-advanced__toggle:hover,
[data-hestia-cron-jobs] .hcron-advanced__toggle:focus-visible {
    color: var(--hosting-text);
}

[data-hestia-cron-jobs] .hcron-advanced__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hosting-orange-ring);
    border-radius: var(--hosting-radius-md);
}

[data-hestia-cron-jobs] .hcron-advanced__icon {
    width: var(--hosting-control-compact-icon-size);
    height: var(--hosting-control-compact-icon-size);
    transition: transform .15s ease;
}

[data-hestia-cron-jobs] .hcron-advanced__toggle.is-open .hcron-advanced__icon {
    transform: rotate(90deg);
}

[data-hestia-cron-jobs] .hcron-advanced__fields {
    padding: 12px 0 12px;
    border-bottom: 0;
}

@keyframes hosting-inline-editor-open {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hosting-inline-editor-close {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-5px); }
}

/* Modal actions share one height and typography, regardless of emphasis. */
.hosting-modal footer > .hosting-btn,
.hosting-modal__footer > .hosting-btn {
    height: var(--hosting-primary-height);
    min-height: var(--hosting-primary-height);
    padding: 1px var(--hosting-primary-padding-inline);
    border-radius: var(--hosting-primary-radius);
    font-size: var(--hosting-primary-font-size);
    font-weight: var(--hosting-primary-font-weight);
    line-height: var(--hosting-primary-line-height);
}

/* The neutral modal action matches the visible primary action without changing it. */
.hosting-modal footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger):not(.hosting-btn--ghost),
.hosting-modal__footer > .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger):not(.hosting-btn--ghost) {
    height: var(--hosting-modal-secondary-height);
    min-height: var(--hosting-modal-secondary-height);
    padding-inline: var(--hosting-modal-secondary-padding-inline);
    font-size: var(--hosting-modal-secondary-font-size);
    line-height: var(--hosting-modal-secondary-line-height);
}

/* Resource-list toolbar neutral actions use the same visible action size as
 * the shared compact control. File Manager has its own toolbar contract and
 * is intentionally excluded. */
:where(
    .hestiacp-web-domains,
    .hosting-dns-zones,
    .hestiacp-mail,
    .hestiacp-databases,
    .hestiacp-ftp,
    [data-hestia-cron-jobs],
    [data-hestia-backups]
) .hosting-toolbar .hosting-btn:not(.hosting-btn--primary):not(.hosting-btn--danger):not(.hosting-btn--ghost) {
    height: var(--hosting-control-compact-height);
    min-height: var(--hosting-control-compact-height);
    padding-inline: var(--hosting-modal-secondary-padding-inline);
    font-size: var(--hosting-modal-secondary-font-size);
    line-height: var(--hosting-modal-secondary-line-height);
}

.hosting-modal__domain {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.hosting-notice,
.hosting-form-error {
    padding: 10px 12px;
    border: 1px solid rgba(201, 59, 59, .28);
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-danger);
    background: rgba(201, 59, 59, .08);
    font-size: var(--hosting-font-size-control);
    line-height: var(--hosting-line-height-secondary);
    font-weight: 500;
}

.hosting-notice {
    margin: 14px 18px;
}

.hosting-notice--warning {
    border-radius: var(--hosting-radius-md);
    border-color: rgba(242, 201, 109, .70);
    color: #805d0b;
    background: #fff8df;
}

.hosting-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(201, 59, 59, .28);
    border-radius: var(--hosting-radius-md);
    color: var(--hosting-danger);
    background: rgba(201, 59, 59, .08);
}

.hosting-callout--warning {
    border-radius: var(--hosting-radius-md);
    border-color: rgba(242, 201, 109, .70);
    color: #805d0b;
    background: #fff8df;
}

.hosting-callout svg {
    width: 22px;
    flex: 0 0 auto;
}

.hosting-callout p {
    margin: 0;
}

.hosting-password-once {
    margin: 0 18px 18px;
}

.dark .hosting-notice,
.dark .hosting-form-error {
    border-color: rgba(255, 106, 0, .34);
    color: #ffd5bd;
    background: rgba(255, 106, 0, .10);
}

.hosting-form-error--text,
.dark .hosting-form-error--text {
    margin-top: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--hosting-danger);
    background: transparent;
}

.dark .hosting-notice--warning {
    color: #ffd98a;
    background: rgba(255, 190, 64, .10);
}

.dark .hosting-callout {
    border-color: rgba(239, 170, 170, .45);
    background: rgba(201, 59, 59, .14);
}

.dark .hosting-callout--warning {
    border-color: rgba(229, 194, 122, .45);
    color: #ffd98a;
    background: rgba(154, 98, 0, .14);
}

.hosting-empty {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 46px 18px;
    color: var(--hosting-muted);
    text-align: center;
}

.hosting-empty > svg,
.hosting-empty > i {
    width: 42px;
    height: 42px;
}

.hosting-empty-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.hosting-empty-state__picture {
    display: block;
    width: min(320px, 80vw);
    margin-bottom: -32px;
    user-select: none;
    -webkit-user-drag: none;
}

.hosting-empty-state__picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.hosting-empty-state__picture .hosting-theme-image--dark {
    display: none;
}

.dark .hosting-empty-state__picture .hosting-theme-image--light {
    display: none;
}

.dark .hosting-empty-state__picture .hosting-theme-image--dark {
    display: block;
}

.hosting-empty-state__text {
    color: var(--hosting-text);
    font-size: 16px;
    font-weight: 600;
}

/* Shared illustrated empty state used by list pages such as Cron and DNS. */
.hosting-empty.hosting-empty--illustrated {
    min-height: 300px;
    padding: 64px 18px 52px;
    border-top: 1px solid var(--hosting-border);
}

.hosting-panel > .hosting-empty--illustrated,
.hosting-panel > .hosting-data-table-wrap:has(> .hosting-empty--illustrated:not([hidden])) {
    flex: 1 1 auto;
    min-height: 0;
}

.hosting-panel > .hosting-data-table-wrap:has(> .hosting-empty--illustrated:not([hidden])) {
    display: flex;
    flex-direction: column;
}

.hosting-panel > .hosting-data-table-wrap:has(> .hosting-empty--illustrated:not([hidden])) > .hosting-empty--illustrated {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.hosting-empty--illustrated .hosting-empty-state {
    display: flex;
    width: min(100%, 560px);
    max-width: 100%;
    margin-inline: auto;
    align-items: center;
    gap: 10px;
}

.hosting-empty__picture--illustrated {
    display: flex;
    width: min(240px, 48vw);
    height: auto;
    aspect-ratio: 400 / 260;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    transform: none;
}

.hosting-empty__picture--illustrated img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hosting-empty--illustrated .hosting-empty-state__text {
    font-size: 18px;
}

/* Keep every illustrated empty state on the same vertical rhythm. */
.hosting-empty--illustrated .hosting-empty-state__text,
.hosting-empty--illustrated .hosting-empty__description,
.hosting-empty--illustrated .hosting-empty__action {
    flex: 0 0 auto;
}

.hosting-empty__description {
    max-width: 440px;
    min-height: 40px;
    margin: 0;
    color: var(--hosting-muted);
    font-size: 14px;
    line-height: 1.45;
}

.hosting-empty__action {
    margin-top: 4px;
}

@media (max-width: 640px) {
    .hosting-empty__picture--illustrated {
        width: min(240px, 62vw);
    }
}

.hosting-loader {
    display: inline-flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--hosting-muted);
    font-size: 13px;
    font-weight: 600;
}

.hosting-loader__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 106, 0, .18);
    border-top-color: var(--hosting-orange);
    border-radius: 999px;
    animation: hosting-spin .75s linear infinite;
}

.hosting-loader__text {
    color: var(--hosting-muted);
}

.hosting-loader__dots span {
    opacity: 0;
    animation: hosting-loader-dot 1.35s infinite;
}

.hosting-loader__dots span:nth-child(2) {
    animation-delay: .18s;
}

.hosting-loader__dots span:nth-child(3) {
    animation-delay: .36s;
}

.hosting-skeleton { display: grid; gap: 14px; padding: 28px 20px; }
.hosting-skeleton__line { height: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--hosting-surface-soft) 25%, rgba(255, 106, 0, .12) 45%, var(--hosting-surface-soft) 65%); background-size: 320% 100%; animation: hosting-skeleton-shimmer 1.35s ease-in-out infinite; }
.hosting-skeleton__line--title { width: min(300px, 62%); height: 24px; }
.hosting-skeleton__line--wide { width: 100%; }
.hosting-skeleton__line--half { width: 52%; }
.hosting-skeleton__inline { display: inline-block; width: 78px; height: .9em; vertical-align: -0.06em; }
.hosting-skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.hosting-skeleton-card { display: grid; align-content: start; gap: 16px; min-height: 190px; padding: 22px; border: 1px solid var(--hosting-border); border-radius: var(--hosting-radius-lg); background: var(--hosting-surface); }
.hosting-skeleton-card--tall { min-height: 310px; }
@media (max-width: 760px) { .hosting-skeleton-grid { grid-template-columns: 1fr; } }
@keyframes hosting-skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@keyframes hosting-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hosting-loader-dot {
    0%, 18% {
        opacity: 0;
    }

    25%, 72% {
        opacity: 1;
    }

    80%, 100% {
        opacity: 0;
    }
}

.hosting-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--hosting-muted);
    background: var(--hosting-surface-muted);
    font-size: 12px;
    font-weight: 750;
}

.hosting-badge--success {
    color: var(--hosting-success);
    background: rgba(21, 132, 88, .10);
}

.hosting-badge--danger {
    color: var(--hosting-danger);
    background: rgba(201, 59, 59, .10);
}

/* Cloudflare-style outlined pills used for backup contents. */
.hosting-badge--outline {
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid oklch(92.2% 0 none);
    border-radius: 999px;
    color: var(--hosting-text);
    background: var(--hosting-surface);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    transition: box-shadow .15s ease, color .15s ease;
}

/* Compact status variant shares the exact chip dimensions used by backup
 * contents while keeping the semantic success/danger colors. */
.hosting-badge--compact {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.hosting-badge--outline:hover,
.hosting-badge--outline:focus-visible {
    color: var(--hosting-text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hosting-text) 56%, transparent);
}

.hosting-badge-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* File Manager layout (shared hosting UI scope) */
.hosting-file-manager {
        --hfm-bg: #ffffff;
        --hfm-bg-soft: #f5f7fb;
        --hfm-bg-toolbar: #edf2f8;
        --hfm-border: var(--hosting-border);
        --hfm-text: #172033;
        --hfm-muted: #66728a;
        --hfm-primary: #ff6a00;
        --hfm-primary-soft: #eaf0ff;
        --hfm-danger: #c93b3b;
        font-size: 14px;
        line-height: 1.4;
        color: var(--hfm-text);
        min-height: 0;
    }

    .hosting-file-manager * {
        box-sizing: border-box;
    }

    .hosting-file-manager .hfm-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: var(--hfm-window-height, calc(100dvh - 180px));
        min-height: min(420px, calc(100dvh - 24px));
    }

    .hosting-file-manager .hfm-header {
        flex: 0 0 auto;
    }

    .hosting-file-manager .hfm-title {
        margin: 0;
    }

    .hosting-file-manager .hfm-breadcrumb-row {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
    }

    .hosting-file-manager .hfm-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        color: var(--hfm-muted);
        font-size: 13px;
        line-height: 1.35;
    }

    .hosting-file-manager .hfm-breadcrumbs button {
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .hosting-file-manager .hfm-breadcrumbs .hfm-crumb-current {
        color: var(--hfm-primary);
    }

    .hosting-file-manager .hfm-breadcrumbs button:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .hosting-file-manager .hfm-crumb-separator {
        padding: 0 2px;
    }

    .hosting-file-manager .hfm-meta {
        display: flex;
        align-items: center;
        justify-items: end;
        gap: 6px;
        color: var(--hfm-muted);
        text-align: right;
        word-break: break-word;
    }

    .hosting-file-manager .hfm-meta strong {
        color: var(--hfm-text);
    }

    .hosting-file-manager .hfm-toolbar {
        flex: 0 0 auto;
    }

    .hosting-file-manager .hfm-search {
        position: relative;
    }
    .hosting-file-manager[data-busy="1"] .hfm-menu button {
        pointer-events: none;
        opacity: .52;
    }

    .hosting-file-manager .hfm-icon {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
    }

    .hosting-file-manager .hfm-selected {
        color: var(--hfm-muted);
        padding-left: 4px;
    }

    .hosting-file-manager .hfm-selected[hidden] {
        display: none;
    }

    .hosting-file-manager .hfm-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        position: relative;
        background: #ffffff;
    }

    .hosting-file-manager.is-loading .hfm-content {
        cursor: wait;
    }

    .hosting-file-manager.is-loading .hfm-table-wrap {
        visibility: hidden;
    }

    .hosting-file-manager.is-loading .hfm-empty {
        opacity: 0;
    }

    .hosting-file-manager .hfm-loading {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .58);
        backdrop-filter: blur(1px);
    }

    .hosting-file-manager.is-loading .hfm-loading {
        display: flex;
    }

    .hosting-file-manager .hfm-loading .hosting-loader__spinner {
        display: block;
        flex: 0 0 34px;
        border-color: rgba(255, 106, 0, .18);
        border-top-color: var(--hosting-orange, #ff6a00);
    }

    .hosting-file-manager .hfm-progress {
        flex: 0 0 auto;
        position: relative;
        height: 18px;
        overflow: hidden;
        border-bottom: 1px solid var(--hfm-border);
        background: #f8fbff;
    }

    .hosting-file-manager .hfm-progress[hidden] {
        display: none;
    }

    .hosting-file-manager .hfm-progress-bar {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0;
        background: linear-gradient(90deg, #ff6a00, #5e7cff);
        transition: width .14s ease;
    }

    .hosting-file-manager .hfm-progress-text {
        position: absolute;
        top: 50%;
        right: 10px;
        color: var(--hfm-text);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        transform: translateY(-50%);
    }

    .hosting-file-manager .hfm-table-wrap {
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .hosting-file-manager .hfm-fm-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 12px;
        border-top: 1px solid var(--hfm-border);
        background: #fbfcff;
        flex-shrink: 0;
    }

    .hosting-file-manager .hfm-page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--hfm-border);
        border-radius: 4px;
        background: #fff;
        color: var(--hfm-text);
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .hosting-file-manager .hfm-page-btn:hover:not(:disabled) {
        background: var(--hfm-bg-soft);
    }

    .hosting-file-manager .hfm-page-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .hosting-file-manager .hfm-page-info {
        font-size: 12px;
        color: var(--hfm-muted);
        white-space: nowrap;
    }

    .hosting-file-manager .hfm-select-all-filtered {
        font-size: 12px;
        color: var(--hfm-primary, #4263d9);
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px 6px;
        text-decoration: underline;
    }

    .hosting-file-manager .hfm-select-all-filtered:hover {
        opacity: 0.8;
    }


    .hosting-file-manager .hfm-pagination-empty {
        padding: 6px 12px;
        text-align: center;
    }

    .hosting-file-manager .hfm-table {
        min-width: 830px;
    }

    .hosting-file-manager .hfm-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 420px;
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--hfm-text);
        font: inherit;
        font-weight: var(--hosting-font-weight-label);
        text-decoration: none;
        cursor: default;
    }

    .hosting-file-manager .hfm-name span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hosting-file-manager .hfm-name--folder {
        color: var(--hfm-primary);
        cursor: pointer;
    }

    .hosting-file-manager .hfm-name--folder:hover span:last-child {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .hosting-file-manager .hfm-file-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    .hosting-file-manager .hfm-muted {
        color: var(--hfm-muted);
        font-weight: 400;
    }

    .hosting-file-manager .hfm-empty {
        height: 100%;
        padding: 42px 16px;
        text-align: center;
        font-size: 14px;
    }

    .hosting-file-manager .hfm-empty.hosting-empty--illustrated {
        min-height: 300px;
        padding: 64px 18px 52px;
    }

    .hosting-file-manager .hfm-menu {
        position: fixed;
        z-index: 50;
        display: none;
        width: 220px;
    }

    .hosting-file-manager .hosting-modal {
        width: min(430px, 100%);
        padding: 16px;
    }

        .hosting-file-manager .hfm-archive-fields {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 8px;
    }

        .hosting-file-manager .hfm-conflict-panel {
        width: min(520px, 100%);
    }

    .hosting-file-manager .hfm-conflict-text {
        margin: 0 0 10px;
        color: var(--hfm-muted);
        font-size: 13px;
    }

    .hosting-file-manager .hfm-conflict-list {
        display: grid;
        gap: 4px;
        max-height: 150px;
        overflow: auto;
        padding: 8px;
        border: 1px solid var(--hfm-border);
        border-radius: 6px;
        background: var(--hfm-bg-soft);
        font-size: 13px;
    }

    .hosting-file-manager .hfm-conflict-list div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hosting-file-manager .hfm-conflict-apply {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        color: var(--hfm-text);
        font-size: 13px;
        font-weight: 600;
    }

    .hosting-file-manager .hfm-picker-panel {
        width: min(540px, 100%);
    }

    .hosting-file-manager .hfm-upload-panel {
        width: min(500px, 100%);
    }

    .hosting-file-manager .hfm-upload-drop {
        display: grid;
        justify-items: center;
        gap: 9px;
        min-height: 230px;
        padding: 28px 20px;
        border: 1.5px dashed #b8c4d8;
        border-radius: 8px;
        background: #f8fbff;
        color: var(--hfm-muted);
        text-align: center;
        cursor: pointer;
        transition: border-color .16s ease, background .16s ease, color .16s ease;
    }

    .hosting-file-manager .hfm-upload-drop:hover,
    .hosting-file-manager .hfm-upload-drop.is-dragging {
        border-color: var(--hfm-primary);
        background: var(--hfm-primary-soft);
        color: var(--hfm-primary);
    }

    .hosting-file-manager .hfm-upload-icon {
        width: 64px;
        height: 64px;
        color: var(--hfm-primary);
    }

    .hosting-file-manager .hfm-upload-title {
        color: var(--hfm-text);
        font-size: 17px;
        font-weight: 700;
    }

    .hosting-file-manager .hfm-upload-hint {
        margin-bottom: 4px;
        font-size: 13px;
    }

    .hosting-file-manager .hfm-picker-top {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }

    .hosting-file-manager .hfm-picker-create-folder {
        color: var(--hfm-primary);
    }

    .hosting-file-manager .hfm-picker-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 12px;
        color: var(--hfm-muted);
        font-size: 13px;
    }

    .hosting-file-manager .hfm-picker-breadcrumbs button,
    .hosting-file-manager .hfm-picker-folder {
        border: 0;
        background: transparent;
        color: var(--hfm-primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .hosting-file-manager .hfm-picker-folders {
        display: grid;
        gap: 4px;
        max-height: 260px;
        overflow: auto;
        margin-top: 12px;
        padding: 8px;
        border: 1px solid var(--hfm-border);
        border-radius: 6px;
        background: var(--hfm-bg-soft);
    }

    .hosting-file-manager .hfm-picker-folder {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 34px;
        border-radius: 6px;
        padding: 0 8px;
        color: var(--hfm-text);
        text-align: left;
    }

    .hosting-file-manager .hfm-picker-folder:hover {
        background: #ffffff;
    }

    .hosting-file-manager .hfm-picker-loading-inline {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 96px;
    }

    .hosting-file-manager .hfm-picker-loading-inline .hosting-loader__spinner {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

    .hosting-file-manager .hfm-editor-panel {
        width: min(940px, 100%);
    }

    .hosting-file-manager .hfm-editor-textarea {
        width: 100%;
        min-height: 52vh;
        resize: vertical;
        border: 1px solid var(--hfm-border);
        border-radius: 6px;
        padding: 12px;
        color: var(--hfm-text);
        background: #0f172a;
        color: #e5e7eb;
        font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        tab-size: 4;
    }

    @media (max-width: 760px) {
        .hosting-file-manager .hfm-card {
            height: var(--hfm-window-height, calc(100dvh - 110px));
            min-height: min(320px, calc(100dvh - 12px));
            border-right: 0;
            border-left: 0;
            border-radius: 0;
        }

        .hosting-file-manager .hfm-header {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 14px;
        }

        .hosting-file-manager .hfm-breadcrumb-row {
            align-items: flex-start;
        }

        .hosting-file-manager .hfm-breadcrumbs {
            min-width: 0;
            font-size: 12px;
        }

        .hosting-file-manager .hfm-breadcrumbs button,
        .hosting-file-manager .hfm-breadcrumbs span {
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hosting-file-manager .hfm-meta {
            justify-items: start;
            text-align: left;
        }

        .hosting-file-manager .hfm-toolbar {
            align-items: center;
            gap: 7px;
            padding: 10px;
        }

        .hosting-file-manager .hfm-selected {
            margin-left: auto;
            padding-left: 0;
            font-size: 12px;
        }

        .hosting-file-manager .hfm-table-wrap {
            height: 100%;
            min-height: 0;
            overflow: auto;
        }

        .hosting-file-manager .hfm-table,
        .hosting-file-manager .hfm-table tbody,
        .hosting-file-manager .hfm-table tr,
        .hosting-file-manager .hfm-table td {
            display: block;
            width: 100%;
        }

        .hosting-file-manager .hfm-table {
            min-width: 0;
            border-collapse: separate;
            font-size: 12px;
        }

        .hosting-file-manager .hfm-table thead {
            display: none;
        }

        .hosting-file-manager .hfm-table tbody {
            display: grid;
            gap: 8px;
            padding: 10px;
            background: #f8fbff;
        }

        .hosting-file-manager .hfm-table .hfm-row {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 2px 8px;
            padding: 10px;
            border: 1px solid var(--hfm-border);
            border-radius: 8px;
            background: #ffffff;
        }

        .hosting-file-manager .hfm-table .hfm-row:hover {
            background: #ffffff;
        }

        .hosting-file-manager .hfm-table .hfm-row.is-selected {
            background: var(--hfm-primary-soft);
        }

        .hosting-file-manager .hfm-table td {
            border: 0;
            padding: 2px 0;
            white-space: normal;
        }

        .hosting-file-manager .hfm-table td[data-cell="select"] {
            grid-row: 1 / span 6;
            padding-top: 2px;
        }

        .hosting-file-manager .hfm-table td[data-cell="name"] {
            grid-column: 2;
            padding-bottom: 5px;
        }

        .hosting-file-manager .hfm-table td[data-cell]:not([data-cell="select"]):not([data-cell="name"]) {
            grid-column: 2;
            display: grid;
            grid-template-columns: 86px minmax(0, 1fr);
            gap: 8px;
            align-items: baseline;
            color: var(--hfm-muted);
        }

        .hosting-file-manager .hfm-table td[data-cell]:not([data-cell="select"]):not([data-cell="name"])::before {
            content: attr(data-label);
            color: var(--hfm-muted);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
        }

        .hosting-file-manager .hfm-name {
            max-width: 100%;
            gap: 7px;
            font-size: 14px;
        }

        .hosting-file-manager .hfm-file-icon {
            width: 20px;
            height: 20px;
        }

        .hosting-file-manager .hfm-empty {
            min-height: 170px;
            padding: 30px 14px;
        }

        .hosting-file-manager .hfm-menu {
            left: 12px !important;
            width: calc(100vw - 24px);
            max-width: 290px;
        }

        .hosting-file-manager .hosting-modal-backdrop {
            align-items: flex-end;
            padding: 10px;
        }

        .hosting-file-manager .hosting-modal {
            width: 100%;
            max-height: calc(100vh - 20px);
            overflow: auto;
            padding: 14px;
        }

        .hosting-file-manager .hfm-picker-top {
            grid-template-columns: 1fr auto;
        }

        .hosting-file-manager .hfm-archive-fields {
            grid-template-columns: 1fr;
        }

        .hosting-file-manager .hfm-picker-top [data-picker-go] {
            grid-column: 1 / -1;
        }

        .hosting-file-manager .hfm-picker-folders {
            max-height: 220px;
        }

        .hosting-file-manager .hfm-upload-drop {
            min-height: 190px;
            padding: 22px 14px;
        }

        .hosting-file-manager .hfm-upload-icon {
            width: 54px;
            height: 54px;
        }

        .hosting-file-manager .hfm-upload-title {
            font-size: 15px;
        }

        .hosting-file-manager .hfm-editor-textarea {
            min-height: 56vh;
            font-size: 12px;
        }
    }
    .dark .hosting-file-manager {
        --hfm-bg: #10131b;
        --hfm-bg-soft: #171b25;
        --hfm-bg-toolbar: #171c27;
        --hfm-border: var(--hosting-border);
        --hfm-text: #f4f6fb;
        --hfm-muted: #a5acba;
        --hfm-primary: #ff6a00;
        --hfm-primary-soft: rgba(255, 106, 0, .14);
        --hfm-danger: #ff6b6b;
    }

    .dark .hosting-file-manager .hfm-content,
    .dark .hosting-file-manager .hfm-table-wrap,
    .dark .hosting-file-manager .hfm-table,
    .dark .hosting-file-manager .hosting-modal {
        background: var(--hfm-bg);
        color: var(--hfm-text);
    }

    .dark .hosting-file-manager .hfm-toolbar,
    .dark .hosting-file-manager .hfm-progress,
    .dark .hosting-file-manager .hfm-fm-pagination,
    .dark .hosting-file-manager .hfm-table th,
    .dark .hosting-file-manager .hfm-picker-folder:hover {
        background: var(--hfm-bg-soft);
    }

    .dark .hosting-file-manager .hfm-loading {
        background: rgba(16, 19, 27, .72);
    }

    .dark .hosting-file-manager .hfm-row:hover {
        background: rgba(255, 106, 0, .08);
    }

    .dark .hosting-file-manager .hfm-row.is-selected {
        background: var(--hfm-primary-soft);
    }

    .dark .hosting-file-manager .hfm-page-btn,
    .dark .hosting-file-manager .hfm-upload-drop,
    .dark .hosting-file-manager .hfm-picker-folders,
    .dark .hosting-file-manager .hfm-conflict-list {
        background: var(--hfm-bg);
        color: var(--hfm-text);
        border-color: var(--hfm-border);
    }

.dark .hosting-file-manager .hfm-upload-drop:hover,
.dark .hosting-file-manager .hfm-upload-drop.is-dragging {
    background: var(--hfm-primary-soft);
}