.hosting-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);gap:24px}.hosting-plan form{padding:22px}.hosting-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.hosting-choice label{display:flex;align-items:center;gap:8px;border:1px solid #444;padding:14px;border-radius:4px}.hosting-choice input{width:auto;accent-color:#0092ff}.hosting-host{display:flex;align-items:center;gap:8px}.hosting-host span{color:#afb7c0;white-space:nowrap}.hosting-payment{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap}.hosting-credit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px}.hosting-credit-grid article{display:grid;gap:18px;padding:20px}.hosting-credit-grid strong{font-size:28px;color:#fff}.hosting-owned{display:grid;gap:14px}.hosting-owned .card{padding:20px}.hosting-owned h3{overflow-wrap:anywhere}.hosting-plan details{margin:18px 0}.hosting-plan details label{margin-top:14px}.hosting-plan .primary{margin-top:12px}@media(max-width:800px){.hosting-layout{grid-template-columns:1fr}.hosting-choice{grid-template-columns:1fr}.hosting-host{flex-wrap:wrap}}

.hosting-live-price{display:flex;align-items:baseline;gap:12px;margin:22px 0;padding:16px;border-left:3px solid #0092ff;background:#0092ff0c}.hosting-live-price strong{font-size:26px;color:#fff}.hosting-live-price span:last-child{font-size:12px;color:#a9b3c0}.status-dot.inactive{background:#d84152;box-shadow:0 0 10px #d8415233}a[aria-disabled="true"]{pointer-events:none;opacity:.45}

.hosting-owner-selection{margin:20px 0}.hosting-owner-field{display:flex;align-items:center;gap:10px}.hosting-owner-field strong{flex:none;min-width:0;color:#fff;font-size:18px;font-variant-numeric:tabular-nums}.hosting-owner-label{display:block;font-size:12px;font-weight:600;color:#bcc6d0;margin-bottom:9px}.hosting-owner-field button{flex:none;white-space:nowrap}.hosting-owner-selection .form-help{margin-top:8px}

#modal:has([data-hosting-owner-form]){width:min(460px,calc(100vw - 32px))}

.hosting-choice{grid-template-columns:1fr 1fr 1fr}.hosting-choice label{flex-wrap:wrap;font-size:12px}.hosting-discount{font-size:10px;color:#54b9ff}.hosting-discount-summary{color:#54b9ff;margin:14px 0}.hosting-benefits{border:1px solid #333e48;border-radius:8px;padding:16px;margin:20px 0;background:#0092ff08}.hosting-benefits h3{font-size:14px;margin:0 0 12px}.hosting-benefits ul{padding-left:18px;display:grid;gap:9px;font-size:12px;color:#d4dce5;line-height:1.5}.hosting-benefits small{display:block;color:#8e9ca8;font-size:10px;margin-top:14px}@media(max-width:800px){.hosting-choice{grid-template-columns:1fr}}

.hosting-history-list{display:grid;gap:12px;margin-top:18px}.hosting-history-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;background:#15191d;border:1px solid #30383f}.hosting-history-list article>div{display:grid;gap:7px}.hosting-history-list small{color:#8e9ca8;font-size:11px}@media(max-width:650px){.hosting-history-list article{flex-wrap:wrap}}

.hosting-history-section{margin-top:26px;padding-top:22px;border-top:1px solid #34414c}.hosting-history-section>h3{font-family:var(--font-display);font-size:20px;font-style:italic;letter-spacing:.03em;margin:0 0 12px}.hosting-history-section>.form-help{line-height:1.6}.hosting-my-servers{min-width:0}.hosting-history-list article{min-width:0}.hosting-history-list strong{overflow-wrap:anywhere}.hosting-history-list .button{flex-shrink:0}

.hosting-history-section>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:#fff;font-family:var(--font-display);font-size:20px;font-style:italic;font-weight:700;letter-spacing:.03em}.hosting-history-section>summary::-webkit-details-marker{display:none}.hosting-history-chevron{width:8px;height:8px;border-right:2px solid #0092ff;border-bottom:2px solid #0092ff;transform:rotate(-45deg);transition:transform .25s ease;margin-right:4px}.hosting-history-section[open] .hosting-history-chevron{transform:rotate(45deg)}.hosting-history-content{padding-top:14px}.hosting-history-content>.form-help{line-height:1.6}.hosting-pass-price{color:#62baff;font-size:13px;font-weight:700;margin-left:auto;margin-right:12px}.hosting-pass-price+.chip{margin-left:0}@media(max-width:650px){.hosting-pass-price{width:100%;margin:0}.hosting-history-section>summary{font-size:18px}}

/* Three fixed active slots; history uses only the remaining panel space. */
.hosting-layout{align-items:start}.hosting-my-servers{height:var(--hosting-plan-height,1150px);display:flex;flex-direction:column;overflow:hidden;min-width:0}.hosting-my-servers>.panel-title{flex:none}.hosting-my-servers>.panel-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:18px}
.hosting-my-servers [data-hosting-orders]{flex:none;padding-bottom:18px}.hosting-owned-pages{display:flex;flex-direction:column;gap:12px}.hosting-owned-pages .hosting-owned{height:628px;display:grid;grid-template-rows:repeat(3,200px);gap:14px;align-content:start;overflow:hidden}.hosting-owned-pages .card{padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}.hosting-owned-pages h3{font-size:17px;margin:0 0 4px}.hosting-owned-pages .section-title{gap:10px;margin:0}.hosting-owned-pages .section-title p{font-size:11px;margin:0}.hosting-owned-pages .card>p{margin:0;font-size:12px;line-height:1.5}.hosting-owned-pages .form-help{font-size:11px}.hosting-owned-pages .actions{gap:6px;margin-top:auto;flex-wrap:wrap}.hosting-owned-pages .actions .button,.hosting-owned-pages .actions button{font-size:11px;padding:7px 8px}
.hosting-my-servers [data-hosting-history]{flex:1;min-height:0;overflow:hidden}.hosting-my-servers .hosting-history-section{height:100%;box-sizing:border-box;overflow:hidden;margin:0;padding-top:14px}.hosting-history-section>summary{font-size:17px;min-height:22px}.hosting-history-content{height:var(--hosting-history-content-height,300px);box-sizing:border-box;display:flex;flex-direction:column;padding-top:8px;min-height:0}.hosting-history-content>.form-help{font-size:11px;line-height:1.5;margin:6px 0 9px;flex:none}.hosting-my-servers .hosting-history-list{flex:1;min-height:0;display:grid;grid-auto-rows:72px;align-content:start;gap:8px;margin:0;overflow:hidden}.hosting-my-servers .hosting-history-list article{height:72px;box-sizing:border-box;padding:10px;font-size:12px;gap:10px;flex-wrap:nowrap;overflow:hidden}.hosting-history-list article>div{min-width:0}.hosting-history-list strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hosting-history-list small{font-size:10px;line-height:1.4}.hosting-my-servers .hosting-history-list .button{font-size:10px;padding:6px 8px;max-width:130px;white-space:normal;text-align:center}.hosting-pagination{margin:0;padding:11px 0 0;border-color:#333;flex:none}.hosting-pagination .track-pagination-controls{gap:5px;flex-wrap:nowrap}.hosting-pagination .track-page-numbers{flex-wrap:nowrap;gap:4px}.hosting-pagination button{font-size:10px;padding:6px 8px}.hosting-pagination .track-page-numbers button{min-width:28px}
@media(max-width:800px){.hosting-my-servers{height:1150px}.hosting-owned-pages .hosting-owned{height:658px;grid-template-rows:repeat(3,210px)}.hosting-owned-pages .card{padding:12px}.hosting-owned-pages h3{font-size:15px}.hosting-my-servers>.panel-body{padding:14px}}

.hosting-port-block label small{font-weight:400;color:var(--muted);float:right}.hosting-port-block .form-help{margin:8px 0 0}


.chip.pending,button.pending{color:#ffd16a;background:#b9891918;border-color:#b9891955}

.hosting-race-addon{display:flex;align-items:center;gap:10px;position:relative}.hosting-race-addon>.check{margin:0;flex:1}.hosting-addon-info{position:relative;flex:0 0 auto}.hosting-addon-info>summary{display:grid;place-items:center;width:22px;height:22px;border:1px solid #8795a5;border-radius:50%;font:italic 700 13px Georgia,serif;color:#b6c8db;cursor:pointer;list-style:none}.hosting-addon-info>summary::-webkit-details-marker{display:none}.hosting-addon-info>div{display:none;position:absolute;z-index:30;right:0;bottom:calc(100% + 10px);width:min(310px,72vw);padding:16px;background:#171a1e;border:1px solid #394655;border-top:2px solid #0092ff;border-radius:5px;box-shadow:0 12px 35px #0008;color:#d9e3ec}.hosting-addon-info[open]>div,.hosting-addon-info:hover>div,.hosting-addon-info:focus-within>div{display:block}.hosting-addon-info p{font-size:12px;line-height:1.55;margin:9px 0 0}.hosting-addon-info strong{font-size:14px}

.hosting-port-error{color:#ff6b76;font-size:12px;margin:6px 0}.hosting-port-block input[aria-invalid=true]{border-color:#e64f62}

/* Small accounts use only the rows they have; full accounts retain the shared panel height. */
.hosting-owned-pages .hosting-owned{height:calc(var(--hosting-active-count,3)*214px - 14px);grid-template-rows:repeat(var(--hosting-active-count,3),200px)}
.hosting-no-active .hosting-owned-pages .hosting-owned{height:75px;display:block}
.hosting-pagination{display:flex;justify-content:flex-end;width:100%;position:static;box-sizing:border-box}
.hosting-pagination .track-pagination-controls{display:flex;align-items:center;justify-content:center;width:auto;max-width:100%;gap:6px}
.hosting-pagination .track-page-numbers{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:28px;overflow:auto}
.hosting-pagination button{display:inline-flex;align-items:center;justify-content:center;width:auto;height:29px;min-width:28px;margin:0;line-height:1;padding:6px 8px;flex:0 0 auto;letter-spacing:normal;transform:none}
@media(max-width:800px){.hosting-my-servers{height:var(--hosting-plan-height,1150px)}.hosting-owned-pages .hosting-owned{height:calc(var(--hosting-active-count,3)*214px - 14px);grid-template-rows:repeat(var(--hosting-active-count,3),200px)}}

/* Let the summary, help and pager take their actual height before fitting rows. */
.hosting-my-servers .hosting-history-section[open]{display:flex;flex-direction:column}
.hosting-my-servers .hosting-history-section::details-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.hosting-my-servers .hosting-history-section>summary{flex:none}
.hosting-my-servers .hosting-history-content{height:auto;flex:1;overflow:hidden}
.hosting-history-content>.hosting-pagination{padding-bottom:2px}

.hosting-review-total{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:17px 0;margin:18px 0;background:transparent;color:#eaf0f7}.hosting-review-total>div{display:grid;text-align:right;gap:4px}.hosting-review-total strong{font-size:24px;line-height:1.2;letter-spacing:0}.hosting-review-total small{font-size:12px;color:#96a2b2}.hosting-checkout-review h2{font-size:24px;overflow-wrap:anywhere}.hosting-checkout-review .hosting-benefits{background:transparent;border:0;padding:0;margin:18px 0}.hosting-checkout-review .hosting-automatic-choice{background:transparent;border:0;padding:14px 0;margin:0;border-top:1px solid #ffffff16}.hosting-checkout-review .hosting-payment{padding-top:15px;border-top:1px solid #ffffff16;gap:10px}.hosting-checkout-review .hosting-payment button{flex:1;font-size:13px}.hosting-race-addon{border:1px solid #ffffff19;border-radius:8px;background:#ffffff03;padding:12px;align-items:center}.hosting-race-addon .check{margin:0;gap:9px}.hosting-race-addon input{width:auto}.hosting-checkout-review>p.form-help{line-height:1.6}

dialog:has(.hosting-checkout-review){width:min(600px,calc(100vw - 32px))}.hosting-checkout-review .hosting-benefits ul{display:grid;gap:8px;margin:10px 0;padding-left:18px}.hosting-checkout-review .hosting-benefits li{margin:0;padding:0;line-height:1.5;font-size:13px}

/* Keep the optional hosting pass visible beside the server purchase choices. */
.hosting-race-addon-choice{margin:0 0 22px}
.hosting-race-addon-choice .hosting-race-addon{border-color:#287bb2;border-radius:4px;background:#0092ff0d;padding:12px;gap:12px}
.hosting-addon-choice{display:flex;align-items:center;gap:13px;flex:1;min-width:0;margin:0;cursor:pointer}
.hosting-addon-choice input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:#0092ff}
.hosting-addon-choice>span:first-of-type{flex:1;min-width:0}
.hosting-addon-choice strong{display:block;font-size:16px;line-height:1.4;color:#fff}
.hosting-addon-choice small{display:block;font-size:12px;line-height:1.5;color:#bcc9d6;font-weight:400;margin-top:3px}
.hosting-addon-price{font-size:17px;color:#71c2ff;font-weight:800;white-space:nowrap;text-align:right}
.hosting-addon-price small{display:inline;margin:0 0 0 2px}
.hosting-addon-choice:has(input:checked) strong{color:#71c2ff}
.hosting-race-addon-choice .hosting-race-addon:has(input:checked){background:#0092ff20;border-color:#0092ff}
.hosting-addon-caption{margin:8px 0 0;font-size:12px;color:#aebbc8}
.hosting-race-addon-choice .hosting-addon-info{margin:0}
.hosting-race-addon-choice .hosting-addon-info>div{top:calc(100% + 10px);bottom:auto}
.hosting-open-panel{background:#23834a;border-color:#319e5d;color:#fff;white-space:nowrap}
.hosting-open-panel:hover{background:#2a9756;border-color:#45b975;color:#fff}
.hosting-open-panel:focus-visible{outline:2px solid #71d795;outline-offset:3px}
@media(max-width:480px){.hosting-race-addon-choice .hosting-race-addon{padding:13px;gap:10px}.hosting-addon-choice{gap:10px}.hosting-addon-choice strong{font-size:15px}.hosting-addon-choice small{font-size:11px}.hosting-addon-price{font-size:20px}}

/* Compact phone choices with comfortable tap targets and balanced server actions. */
@media(max-width:560px){
 .hosting-layout{grid-template-columns:minmax(0,1fr)}
 .hosting-plan form{padding:16px}
 .hosting-choice{gap:8px;margin-bottom:14px}
 .hosting-choice label{margin:0;padding:11px 12px;min-height:46px;flex-wrap:nowrap}
 .hosting-choice input{flex:0 0 16px;width:16px;min-height:0;height:16px;margin:0}
 .hosting-discount{margin-left:auto;white-space:nowrap}
 .hosting-race-addon-choice{margin-bottom:16px}
 .hosting-race-addon-choice .hosting-race-addon{padding:10px 12px;gap:10px;min-height:58px}
 .hosting-addon-choice{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 10px;align-items:center;min-height:36px}
 .hosting-addon-choice input{grid-row:1/3;align-self:center}
 .hosting-addon-choice strong{font-size:14px;line-height:1.4}
 .hosting-addon-choice>span:first-of-type>small{display:none}
 .hosting-addon-price{grid-column:2;font-size:13px;text-align:left;line-height:1.4}
 .hosting-addon-price small{font-size:11px}
 .hosting-addon-caption{font-size:11px;margin-top:6px}
 .hosting-race-addon-choice .hosting-addon-info>summary{width:30px;height:30px}
 .hosting-race-addon-choice .hosting-addon-info>div{width:min(310px,calc(100vw - 70px));max-height:60vh;overflow:auto}
 .hosting-owned-pages .actions>.button,.hosting-owned-pages .actions>button{flex:1 1 calc(50% - 6px);display:flex;justify-content:center;align-items:center;min-height:42px;padding:9px 8px;text-align:center;line-height:1.35}
 .hosting-owned-pages .actions>.hosting-open-panel{flex-basis:100%}
 .hosting-owned-pages .hosting-owned{height:auto;grid-template-rows:none;grid-auto-rows:minmax(240px,auto);overflow:visible}
 .hosting-owned-pages .card{margin-bottom:0}
 .hosting-my-servers .panel-title{flex-wrap:wrap;gap:8px}
 .hosting-my-servers .panel-title>a{font-size:12px}
 .hosting-live-price{flex-wrap:wrap;gap:8px 12px}
}

@media(max-width:560px){
 dialog:has([data-hosting-extra-pay]){width:calc(100vw - 32px);max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box}
 dialog:has([data-hosting-extra-pay]) h2{overflow-wrap:anywhere;white-space:normal;font-size:19px;letter-spacing:.03em}
 dialog:has([data-hosting-extra-pay]) .hosting-review-total{gap:12px}
 dialog:has([data-hosting-extra-pay]) .hosting-review-total strong{font-size:20px;min-width:0;text-align:right}
 dialog:has([data-hosting-extra-pay]) .hosting-payment{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 dialog:has([data-hosting-extra-pay]) .hosting-payment button{width:100%;min-height:44px;white-space:normal}
}

#hosting-name-help,#hosting-name-error{display:block;line-height:1.5;margin:7px 0 0}#hosting-name-error{color:#ff858d}#hosting-name-error[hidden]{display:none}
