/* Getwebup customer panel: shared components (hPanel-style redesign).
   Loaded by every customer layout after the legacy stylesheets, so equal selectors win here. Where a legacy rule is
   stronger (theme.css hover states, pages.css .pay-methods, .menu-btn …) the same selector is repeated on purpose.
   Page packages never restyle these globally; they adjust them under their own page scope.
   Nothing here may put transform/filter/contain on an element that can hold a menu (.dd, .row-dd, .modal): ui.js
   places row menus with position:fixed. */

/* =============================================================== Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--hp-r-sm);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--hp-t) var(--hp-ease),border-color var(--hp-t) var(--hp-ease),color var(--hp-t) var(--hp-ease),box-shadow var(--hp-t) var(--hp-ease)}
.btn svg{width:18px;height:18px}
.btn-sm{min-height:32px;padding:0 12px;gap:6px;font-size:13px}
.btn-sm svg{width:16px;height:16px}
.btn-lg{min-height:48px;padding:0 20px;font-size:15px}
.modal-foot .btn-lg{min-height:44px;padding:0 20px;font-size:15px}
.btn-block{width:100%}
.btn-primary{background:var(--hp-accent);border-color:var(--hp-accent);color:var(--hp-on-accent)}
.btn-primary:hover:not(:disabled){background:var(--hp-accent-hover);border-color:var(--hp-accent-hover);color:var(--hp-on-accent)}
.btn-outline,.btn-ghost,.btn-chip{background:var(--hp-surface);border:1px solid var(--hp-border-strong);color:var(--hp-text-2)}
.btn-outline:hover:not(:disabled),.btn-ghost:hover:not(:disabled),.btn-chip:hover:not(:disabled){background:var(--hp-hover);border-color:var(--hp-border-strong);color:var(--hp-text)}
.btn-chip{border-radius:var(--hp-r-pill)}
.btn-danger{background:var(--hp-bad);border-color:var(--hp-bad);color:#fff}
.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--hp-bad) 86%,#000);border-color:color-mix(in srgb,var(--hp-bad) 86%,#000);color:#fff}
:root[data-theme="dark"] .btn-danger{background:#d92d20;border-color:#d92d20}
:root[data-theme="dark"] .btn-danger:hover:not(:disabled){background:#b42318;border-color:#b42318}
/* a white button on accent surfaces: same in both themes */
.btn-white{background:#fff;border-color:#fff;color:#101828}
.btn-white:hover:not(:disabled){background:#f2f4f7;border-color:#f2f4f7;color:#101828}
.btn:disabled,.btn[disabled],.btn.disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
a.btn.disabled,.btn[aria-disabled="true"]{pointer-events:none}
.btn:focus-visible{outline:2px solid var(--hp-accent);outline-offset:2px}

.icon-btn{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;flex:none;border:0;border-radius:var(--hp-r-sm);background:transparent;color:var(--hp-muted);transition:background-color var(--hp-t),color var(--hp-t)}
.icon-btn:hover{background:var(--hp-hover);color:var(--hp-text);border-color:transparent}
.icon-btn svg{width:20px;height:20px}
.icon-btn.sm{width:28px;height:28px;border-radius:var(--hp-r-xs)}
.icon-btn.sm svg{width:18px;height:18px}
.icon-x{width:36px;height:36px;border-radius:var(--hp-r-sm);color:var(--hp-muted)}
.icon-x:hover{background:var(--hp-hover);color:var(--hp-text)}
.link,a.link{color:var(--hp-accent-text);font-weight:600;font-size:13px}
.link:hover{text-decoration:underline;text-underline-offset:2px}
.link-sm,a.link-sm{color:var(--hp-accent-text);font-weight:600}
.link-btn{color:var(--hp-accent-text);font-weight:600}
.muted a,.plain a{color:var(--hp-accent-text)}
.pill{background:var(--hp-accent);color:var(--hp-on-accent);border-radius:var(--hp-r-pill)}
.tile{background:var(--hp-accent);color:var(--hp-on-accent);border-radius:10px}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:var(--hp-r-pill);background:var(--hp-bad-soft);color:var(--hp-bad);font-size:12px;font-weight:700;line-height:1}
.copy{width:28px;height:28px;border-radius:var(--hp-r-xs);display:inline-grid;place-items:center;color:var(--hp-muted);vertical-align:middle}
.copy:hover{background:var(--hp-hover);color:var(--hp-accent-text)}
.copy svg{width:16px;height:16px}

/* =============================================================== Cards */
.card{background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);padding:24px;box-shadow:var(--hp-sh-xs)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px;min-height:24px}
.card-head h2{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:0}
.card-head>:not(h2){flex:none}
/* full-bleed tables */
.card.hp-flush,.card:has(>.table-wrap:first-child){padding:0}
.card.hp-flush>.card-head{margin:0;padding:20px 24px;border-bottom:1px solid var(--hp-divider)}
.card.hp-flush>.table-wrap:last-child{border-radius:0 0 calc(var(--hp-r-md) - 1px) calc(var(--hp-r-md) - 1px)}
.card:has(>.table-wrap:first-child)>.table-wrap:first-child{border-radius:calc(var(--hp-r-md) - 1px)}
@media (min-width:768px){
  .card>.card-head+.table-wrap:last-child{margin:0 -24px -24px;border-top:1px solid var(--hp-divider);border-radius:0 0 calc(var(--hp-r-md) - 1px) calc(var(--hp-r-md) - 1px)}
}
.muted{color:var(--hp-muted)}

/* =============================================================== Stat tiles (x-user.stat) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 24px}
.stat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center;min-width:0;padding:20px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:var(--hp-sh-xs);color:inherit;transition:border-color var(--hp-t),box-shadow var(--hp-t)}
.stat:hover{transform:none;border-color:var(--hp-border)}
a.stat:hover{border-color:var(--hp-accent-line);box-shadow:var(--hp-sh-sm)}
.stat>div{display:contents}
.stat .s-ico{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:10px;background:var(--hp-accent-soft);color:var(--hp-accent-text);display:grid;place-items:center}
.stat .s-ico svg{width:20px;height:20px}
.stat small{grid-column:2;grid-row:1;min-width:0;font-size:13px;line-height:1.35;color:var(--hp-muted)}
.stat strong{grid-column:1/-1;min-width:0;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;color:var(--hp-text)}
.stat em{grid-column:1/-1;margin-top:-4px;font-size:12px;font-style:normal;font-weight:500;color:var(--hp-muted)}
.stat.warn .s-ico{background:var(--hp-warn-soft);color:var(--hp-warn)}
.stat.warn em{color:var(--hp-warn)}
@media (max-width:1279px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =============================================================== Icon tiles, account header */
.hp-ico{width:40px;height:40px;border-radius:10px;background:var(--hp-accent-soft);color:var(--hp-accent-text);display:grid;place-items:center;flex:none}
.hp-ico svg{width:20px;height:20px}
.hp-ico.lg{width:56px;height:56px;border-radius:14px}
.hp-ico.lg svg{width:28px;height:28px}

.hp-acct{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"ico id btns";align-items:center;gap:16px 20px;margin:0 0 24px;padding:20px 24px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:var(--hp-sh-xs)}
.hp-acct>.hp-ico{grid-area:ico}
.hp-acct-id{grid-area:id;min-width:0}
.hp-acct-name{display:block;min-width:0;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--hp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-acct-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13px;color:var(--hp-muted)}
.hp-acct-meta>.hp-meta{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hp-acct-meta>.hp-meta svg{width:14px;height:14px}
.hp-acct-meta .hp-late{color:var(--hp-bad);font-weight:600}
.hp-acct-sub{margin-top:6px;font-size:13px;color:var(--hp-muted)}
.hp-acct-btns{grid-area:btns;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media (max-width:1279px){
  .hp-acct{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"ico id" "btns btns"}
  .hp-acct-btns{justify-content:flex-start}
  .hp-acct-btns:empty{display:none}
}

/* =============================================================== Service tiles (x-user.service-tile) */
.hp-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.hp-svc-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1279px){.hp-svc-grid.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.hp-svc-grid,.hp-svc-grid.is-3{grid-template-columns:minmax(0,1fr)}}
.hp-svc{display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:var(--hp-sh-xs);transition:box-shadow var(--hp-t),border-color var(--hp-t)}
.hp-svc:hover{box-shadow:var(--hp-sh-sm);border-color:var(--hp-border-strong)}
/* ended: a grey surface and a muted icon, as in the hosting list (no opacity: it would drop muted text below 4.5:1) */
.hp-svc.is-ended{background:var(--hp-surface-2)}
.hp-svc.is-ended .hp-ico{background:var(--hp-surface-3);color:var(--hp-muted)}
.hp-svc.is-ended .hp-svc-head h3{color:var(--hp-text-2)}
/* the status badges sit under the name, so the name keeps the full width of the tile (dashboard and hosting grid alike) */
.hp-svc-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;column-gap:12px;row-gap:8px}
.hp-svc-id{min-width:0}
.hp-svc-head h3{font-size:16px;font-weight:600;line-height:1.35;color:var(--hp-text)}
.hp-svc-head h3 a:hover{color:var(--hp-accent-text)}
.hp-svc-sub{margin-top:2px;font-size:13px;color:var(--hp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-svc-badges{grid-column:2;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
.hp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0}
.hp-facts>div{min-width:0}
.hp-facts dt{margin-bottom:2px;font-size:12px;font-weight:500;color:var(--hp-muted)}
.hp-facts dd{min-width:0;font-size:14px;font-weight:500;color:var(--hp-text);overflow-wrap:anywhere;word-break:normal}
.hp-facts dd small{display:block;font-size:12px;font-weight:400;color:var(--hp-muted)}
.hp-facts dd .bar{margin:6px 0 4px}
.hp-facts dd .hp-late{color:var(--hp-bad)}
.hp-svc-foot{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hp-divider)}
.hp-svc-foot>.muted{font-size:13px}

/* =============================================================== Lists and row cards */
.hp-list{margin:0;padding:0;list-style:none;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:var(--hp-sh-xs)}
.hp-li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name meta act";align-items:center;gap:8px 16px;padding:16px 20px;border-top:1px solid var(--hp-divider);min-width:0}
.hp-li:first-child{border-top:0}
.hp-li-main{grid-area:name;min-width:0}
.hp-li-main b{display:block;font-weight:600;color:var(--hp-text)}
.hp-li-main small{display:block;font-size:13px;color:var(--hp-muted)}
.hp-li-meta{grid-area:meta;font-size:13px;color:var(--hp-muted);white-space:nowrap}
.hp-li-act{grid-area:act;display:flex;align-items:center;gap:8px}
/* inside a card the list loses its own frame */
.card .hp-list{border:0;border-radius:0;box-shadow:none;background:none}
.card .hp-list>.hp-li{padding:14px 0}
.card .hp-list>.hp-li:first-child{padding-top:0}
.card .hp-list>.hp-li:last-child{padding-bottom:0}
.hp-row{display:grid;align-items:center;gap:16px;min-width:0;padding:16px 20px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:var(--hp-sh-xs);transition:border-color var(--hp-t),box-shadow var(--hp-t)}
.hp-row:hover{border-color:var(--hp-border-strong)}
@media (max-width:767px){
  .hp-li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name act" "meta meta";padding:14px 16px}
  .hp-row{padding:16px}
}

/* =============================================================== Tables */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:12px 16px;background:var(--hp-surface-2);border-bottom:1px solid var(--hp-divider);font-size:12px;font-weight:600;line-height:1.4;color:var(--hp-muted);text-align:left;text-transform:none;letter-spacing:0;white-space:nowrap}
.tbl td{height:56px;padding:14px 16px;border-bottom:1px solid var(--hp-divider);font-size:14px;color:var(--hp-text);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--hp-hover)}
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.act{white-space:nowrap;text-align:right}
.tbl .muted{font-size:12px}
.tbl.compact th,.tbl.compact td{height:auto;padding:8px 12px}
.th-sort a{color:inherit}
.th-sort a:hover,.th-sort.on a{color:var(--hp-text)}
.card:has(>.table-wrap:first-child) .tbl thead th:first-child{border-top-left-radius:calc(var(--hp-r-md) - 1px)}
.card:has(>.table-wrap:first-child) .tbl thead th:last-child{border-top-right-radius:calc(var(--hp-r-md) - 1px)}
/* a table flush to the card edges (flush card, or a table bleeding under a card head): the first and last columns line up
   with the card title and the toolbar (24px), whatever padding a page gives the other cells */
@media (min-width:768px){
  .card.hp-flush .tbl tr>:first-child,.card>.card-head+.table-wrap:last-child .tbl tr>:first-child{padding-left:24px}
  .card.hp-flush .tbl tr>:last-child,.card>.card-head+.table-wrap:last-child .tbl tr>:last-child{padding-right:24px}
}

/* =============================================================== Tabs */
.tabs{display:flex;gap:24px;margin:0 0 24px;border-bottom:0;box-shadow:inset 0 -1px 0 var(--hp-border);overflow-x:auto;scrollbar-width:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 2px;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:var(--hp-muted);white-space:nowrap}
.tabs a:hover{color:var(--hp-text)}
.tabs a.active{color:var(--hp-text);font-weight:600;border-bottom-color:var(--hp-accent)}
.t-count{display:inline-block;min-width:20px;padding:0 7px;border:0;border-radius:var(--hp-r-pill);background:var(--hp-surface-3);color:var(--hp-muted);font-size:12px;font-weight:600;line-height:20px;text-align:center}
.tabs a.active .t-count{background:var(--hp-accent-soft);color:var(--hp-accent-text)}
/* a strip wider than the screen scrolls sideways: user-assets/js/core/nav.js marks the edge(s) with more tabs behind
   them, and that edge fades out instead of cutting a label in half */
.tabs.hp-more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.tabs.hp-more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent)}
.tabs.hp-more-l.hp-more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}

/* =============================================================== Segmented filter */
.seg{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;max-width:100%;padding:4px;border:0;border-radius:10px;background:var(--hp-surface-3);box-shadow:inset 0 0 0 1px var(--hp-border)}
.seg a,.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--hp-r-sm);font-size:13px;font-weight:500;color:var(--hp-muted);white-space:nowrap}
.seg a:hover,.seg button:hover{color:var(--hp-text)}
.seg .active{background:var(--hp-surface);color:var(--hp-text);font-weight:600;box-shadow:var(--hp-sh-xs)}
:root[data-theme="dark"] .seg .active{background:var(--hp-border-strong)}
.seg em{font-style:normal;font-size:11px;font-weight:700;color:var(--hp-ok);margin-left:2px}
.seg.view-toggle a,.seg.view-toggle button{padding:0 10px}
.seg.view-toggle svg{width:16px;height:16px}

/* =============================================================== Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.toolbar.flush{margin-bottom:16px}
/* a toolbar on top of a flush card (billing lists, tickets, notifications, domains, DNS records): one padding everywhere */
.card.hp-flush>.toolbar{margin:0;padding:16px 24px;border-bottom:1px solid var(--hp-divider)}
.toolbar-r{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.search-box{display:flex;align-items:center;gap:8px;width:320px;max-width:100%;min-width:0;flex:0 1 320px;height:40px;padding:0 12px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);background:var(--hp-surface);color:var(--hp-muted);transition:border-color var(--hp-t),box-shadow var(--hp-t)}
.search-box:focus-within{border-color:var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.search-box svg{width:18px;height:18px}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--hp-text);font-size:14px}
.search-box input::placeholder{color:var(--hp-subtle)}

/* =============================================================== Forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{margin:0;font-size:13px;font-weight:600;color:var(--hp-text-2)}
.field>label em{color:var(--hp-bad);font-style:normal}
.input,select.input,textarea.input{width:100%;min-height:40px;padding:0 12px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);background-color:var(--hp-surface);color:var(--hp-text);font-size:14px;line-height:1.4;box-shadow:none;transition:border-color var(--hp-t),box-shadow var(--hp-t)}
select.input{padding-right:36px;background-position:right 12px center}
textarea.input{min-height:96px;padding:10px 12px;line-height:1.5}
.input:hover{border-color:var(--hp-subtle)}
.input:focus{outline:0;border-color:var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.input::placeholder{color:var(--hp-subtle)}
.input:disabled{background-color:var(--hp-surface-2);color:var(--hp-muted);cursor:not-allowed}
.hint{font-size:12px;color:var(--hp-muted)}
.err{font-size:12px;font-weight:500;color:var(--hp-bad)}
.field.invalid .input,.field.invalid .affix{border-color:var(--hp-bad)}
.field.invalid .input:focus{box-shadow:0 0 0 3px var(--hp-bad-soft)}
.affix{min-height:40px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);background:var(--hp-surface)}
.affix:focus-within{border-color:var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.affix .input{min-height:38px;border:0;border-radius:0}
.affix>span{padding:0 12px;background:var(--hp-surface-2);color:var(--hp-muted);font-size:13px;border-right:1px solid var(--hp-border)}
.affix>span.after{border-right:0;border-left:1px solid var(--hp-border)}
.pw .input{padding-right:44px}
.pw-toggle{right:4px;width:32px;height:32px;border-radius:var(--hp-r-xs);color:var(--hp-muted)}
.pw-toggle:hover{background:var(--hp-hover);color:var(--hp-text)}
.check{font-size:14px;color:var(--hp-text-2)}
.check .box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--hp-border-strong);background:var(--hp-surface)}
.check .box svg{stroke:var(--hp-on-accent)}
.check input:checked+.box{background:var(--hp-accent);border-color:var(--hp-accent)}
.check input:focus-visible+.box{outline:0;box-shadow:0 0 0 3px var(--hp-accent-ring)}
.switch{position:relative;width:36px;height:20px;flex:none;border-radius:var(--hp-r-pill);background:var(--hp-border-strong);transition:background-color var(--hp-t)}
[data-theme="dark"] .switch{background:var(--hp-border-strong)}
.switch i{top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2)}
.switch.on,[data-theme="dark"] .switch.on{background:var(--hp-accent)}
.switch.on i{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--hp-accent);outline-offset:2px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .field.full{grid-column:1/-1}
.radio-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.rc,label.rc{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-md);background:var(--hp-surface);cursor:pointer;transition:border-color var(--hp-t),background-color var(--hp-t),box-shadow var(--hp-t)}
.rc:hover{border-color:var(--hp-subtle)}
.rc.on,.rc:has(input:checked){border-color:var(--hp-accent);background:var(--hp-accent-soft);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.rc:has(input:focus-visible){outline:2px solid var(--hp-accent);outline-offset:2px}
.rc b{display:block;font-weight:600;color:var(--hp-text)}
.rc small{display:block;font-size:13px;color:var(--hp-muted)}
.rc-ico,.oc-ico{width:40px;height:40px;border-radius:10px;background:var(--hp-accent-soft);color:var(--hp-accent-text)}
/* a radio card shows a radio dot on the right, like the pay modal's methods (order step 2, domain nameservers) */
label.rc:has(>input[type=radio]){position:relative;padding-right:48px}
label.rc:has(>input[type=radio])>div{min-width:0}
label.rc:has(>input[type=radio])::after{content:"";position:absolute;top:50%;right:16px;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.5px solid var(--hp-border-strong);background:var(--hp-surface);box-sizing:border-box}
label.rc.on:has(>input[type=radio])::after,label.rc:has(>input[type=radio]:checked)::after{border:5px solid var(--hp-accent)}
/* fields locked by a verification */
.input.locked,.field input.is-locked,.field select.is-locked{opacity:1;cursor:not-allowed;color:var(--hp-text-2);background-color:var(--hp-surface-2);padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 118 0v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.inline-form{display:flex;gap:8px}
.copy-field{display:flex;gap:8px}
.copy-field .input{flex:1;background-color:var(--hp-surface-2)}
.modal-intro{margin-bottom:16px;color:var(--hp-muted)}

/* =============================================================== Badges and tags */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:0;border-radius:var(--hp-r-pill);font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.ok,.badge.active,.badge.paid{color:var(--hp-ok);background:var(--hp-ok-soft)}
.badge.warn,.badge.pending{color:var(--hp-warn);background:var(--hp-warn-soft)}
.badge.bad,.badge.overdue,.badge.suspended{color:var(--hp-bad);background:var(--hp-bad-soft)}
.badge.info{color:var(--hp-info);background:var(--hp-info-soft)}
.badge.mute{color:var(--hp-mute);background:var(--hp-mute-soft);border:0}
.tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:0;border-radius:var(--hp-r-xs);font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.tag:not([class*="type-"]){background:var(--hp-surface-3);color:var(--hp-text-2)}
.tag.ext:not([class*="type-"]){background:var(--hp-info-soft);color:var(--hp-info)}

/* =============================================================== Banners and alerts */
.card.banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px;margin-bottom:24px;padding:16px 20px;border:1px solid var(--hp-info-line);border-left:4px solid var(--hp-info);background:var(--hp-info-soft);box-shadow:none;color:var(--hp-text)}
.card.banner.warn-card{border-color:var(--hp-warn-line);border-left-color:var(--hp-warn);background:var(--hp-warn-soft)}
.card.banner.bad-card{border-color:var(--hp-bad-line);border-left-color:var(--hp-bad);background:var(--hp-bad-soft)}
.card.banner.ok-card{border-color:var(--hp-ok-line);border-left-color:var(--hp-ok);background:var(--hp-ok-soft)}
.card.banner.info-card{border-color:var(--hp-info-line);border-left-color:var(--hp-info);background:var(--hp-info-soft)}
.card.banner .b-ico{width:40px;height:40px;border-radius:10px;background:var(--hp-surface);color:var(--hp-info);display:grid;place-items:center;flex:none}
.card.banner.warn-card .b-ico{color:var(--hp-warn)}
.card.banner.bad-card .b-ico{color:var(--hp-bad)}
.card.banner.ok-card .b-ico{color:var(--hp-ok)}
.card.banner .b-main{flex:1;min-width:0}
.card.banner .b-main>b{display:block;font-size:15px;font-weight:600;color:var(--hp-text)}
.card.banner .b-main h2{font-size:16px;font-weight:600}
.card.banner .b-main p{margin-top:2px;font-size:13px;color:var(--hp-text-2)}
.card.banner>.btn,.card.banner>a.btn,.card.banner>.btn-row{flex:none}
.stack>.card.banner,.hp-stack>.card.banner,.col-main>.card.banner,.grid>.card.banner{margin-bottom:0}
.alert{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:12px 14px;border:1px solid transparent;border-radius:var(--hp-r-sm);font-size:14px;line-height:1.45}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert>span{min-width:0}
.alert.ok{background:var(--hp-ok-soft);border-color:var(--hp-ok-line);color:var(--hp-ok)}
.alert.err{background:var(--hp-bad-soft);border-color:var(--hp-bad-line);color:var(--hp-bad)}
.alert.info{background:var(--hp-info-soft);border-color:var(--hp-info-line);color:var(--hp-info)}
.alert.warn{background:var(--hp-warn-soft);border-color:var(--hp-warn-line);color:var(--hp-warn)}
.demo-hint{display:flex;gap:10px;margin-top:24px;padding:12px 14px;border:1px dashed var(--hp-info-line);border-radius:var(--hp-r-sm);background:var(--hp-info-soft);color:var(--hp-text-2);font-size:13px;line-height:1.5}
.demo-hint svg{flex:none;margin-top:2px;color:var(--hp-info)}
.demo-hint>div{min-width:0}
.demo-hint code{background:var(--hp-surface);white-space:nowrap;word-break:normal;overflow-wrap:normal}

/* =============================================================== Dropdowns */
.dd{position:relative}
.dd-menu{min-width:220px;padding:6px;border:1px solid var(--hp-border);border-radius:var(--hp-r-md);background:var(--hp-surface);box-shadow:var(--hp-sh-lg);color:var(--hp-text);z-index:var(--hp-z-menu);text-align:left}
.dd-menu>a,.dd-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border-radius:var(--hp-r-sm);font-size:14px;font-weight:500;color:var(--hp-text-2);text-align:left;white-space:nowrap}
.dd-menu>a:hover,.dd-menu>button:hover:not(:disabled){background:var(--hp-hover);color:var(--hp-text)}
.dd-menu>button:disabled{opacity:.5;cursor:not-allowed}
.dd-menu svg{width:16px;height:16px;color:var(--hp-muted);flex:none}
.dd-menu>a>small,.dd-menu>button>small{margin-left:auto;color:var(--hp-subtle)}
.dd-menu .danger,.dd-menu .danger svg,.dd-menu button.danger,.dd-menu button.danger svg{color:var(--hp-bad)}
.dd-menu hr{border:0;border-top:1px solid var(--hp-divider);margin:6px 0}
.dd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:600;color:var(--hp-muted)}
.dd-head .link{background:none;font-size:12px}
.row-dd .dd-menu{min-width:200px}
.dd-menu.hp-dd-up{top:auto;bottom:calc(100% + 8px)}   /* user-assets/js/core/nav.js: not enough room below the button */
.results{padding:6px;border:1px solid var(--hp-border);border-radius:var(--hp-r-md);background:var(--hp-surface);box-shadow:var(--hp-sh-lg);color:var(--hp-text);z-index:var(--hp-z-menu)}
.res-group{padding:10px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted)}
.res-item{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-height:44px;padding:4px 10px;border-radius:var(--hp-r-sm);cursor:pointer}
.res-item span{max-width:100%;font-size:14px;font-weight:500;color:var(--hp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-item small{font-size:12px;color:var(--hp-muted)}
.res-item:hover,.res-item:focus-visible{background:var(--hp-hover)}
.res-empty{padding:16px;font-size:13px;color:var(--hp-muted);text-align:center}

/* =============================================================== Modals */
.modal-back{background:rgba(16,24,40,.5)}
.modal-card{width:min(100%,560px);background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);box-shadow:var(--hp-sh-lg);color:var(--hp-text)}
.modal-card.sm{width:min(100%,420px)}
.modal-card.lg{width:min(100%,760px)}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--hp-divider)}
.modal-head h3{font-size:18px;font-weight:600;letter-spacing:0}
.modal-body{padding:24px}
.modal-foot{gap:8px;justify-content:flex-end;padding:16px 24px;background:var(--hp-surface-2);border-top:1px solid var(--hp-divider);border-radius:0 0 var(--hp-r-lg) var(--hp-r-lg)}
.confirm .c-ico{background:var(--hp-accent-soft);color:var(--hp-accent-text)}
.confirm.danger .c-ico{background:var(--hp-bad-soft);color:var(--hp-bad)}

/* =============================================================== Toasts */
.toasts{right:24px;bottom:24px;gap:10px;max-width:calc(100vw - 48px)}
.tst{min-width:280px;max-width:420px;padding:12px 10px 12px 14px;border:0;border-radius:var(--hp-r-md);background:#101828;color:#f9fafb;box-shadow:var(--hp-sh-lg);font-size:14px;line-height:1.45}
.tst>svg{width:20px;height:20px;color:#53b1fd}
.tst.success>svg{color:#47cd89}
.tst.error>svg{color:#f97066}
.tst.warn>svg{color:#fdb022}
.tst button{width:28px;height:28px;border-radius:var(--hp-r-xs);color:#98a2b3}
.tst button:hover{background:rgba(255,255,255,.1);color:#fff}
:root[data-theme="dark"] .tst{background:var(--hp-surface-3);color:var(--hp-text);border:1px solid var(--hp-border)}
:root[data-theme="dark"] .tst button{color:var(--hp-muted)}
:root[data-theme="dark"] .tst button:hover{background:var(--hp-hover);color:var(--hp-text)}

/* =============================================================== Meter */
.meter .m-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:13px}
.meter .m-top b{font-weight:600;color:var(--hp-text)}
.meter .m-top span{color:var(--hp-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:var(--hp-r-pill);background:var(--hp-surface-3);overflow:hidden}
.bar.sm{height:6px}
.bar i{display:block;height:100%;border-radius:var(--hp-r-pill);background:var(--hp-accent)}
.bar i.mid{background:var(--hp-warn)}
.bar i.hot{background:var(--hp-bad)}
:root[data-theme="dark"] .bar{background:var(--hp-border)}

/* =============================================================== Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:40px 24px;text-align:center}
.empty-state .es-ico{width:48px;height:48px;margin-bottom:16px;border-radius:50%;background:var(--hp-accent-soft);color:var(--hp-accent-text);display:grid;place-items:center}
.empty-state .es-ico svg{width:22px;height:22px}
.empty-state h3{margin-bottom:4px;font-size:16px;font-weight:600;color:var(--hp-text)}
.empty-state p{max-width:420px;margin-bottom:16px;font-size:14px;color:var(--hp-muted)}
.empty-state p:last-child{margin-bottom:0}
.empty-state.compact{padding:24px}
.empty-state.compact .es-ico{width:40px;height:40px;margin-bottom:12px}

/* =============================================================== Page head */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin:0 0 24px}
.page-head>div:first-child{min-width:0}
.page-head h1{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--hp-text)}
.page-head p{margin-top:4px;font-size:14px;color:var(--hp-muted)}
.head-btns{display:flex;flex-wrap:wrap;gap:8px}
.back-link{display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--hp-muted)}
.back-link svg{width:16px;height:16px;transform:none}
.back-link:hover{color:var(--hp-accent-text)}
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 16px;font-size:13px;color:var(--hp-muted)}
.crumbs>*{flex:none;white-space:nowrap}
.crumbs>a:not(:first-child),.crumbs>b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumbs a:hover{color:var(--hp-accent-text)}
.crumbs b{font-weight:600;color:var(--hp-text)}
.crumbs>span{color:var(--hp-subtle)}

/* =============================================================== Key / value */
.kv{display:flex;flex-direction:column;margin:0}
.kv>div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--hp-divider)}
.kv>div:last-child{border-bottom:0}
.kv.slim>div{padding:8px 0}
.kv dt{font-size:13px;color:var(--hp-muted)}
.kv dd{min-width:0;font-size:14px;font-weight:500;color:var(--hp-text);text-align:left;overflow-wrap:anywhere;word-break:normal}
/* 340px side column: a 200px label column would leave values ~80px and split names like domains mid-word */
@media (min-width:1280px){.col-side .kv>div{grid-template-columns:minmax(88px,38%) minmax(0,1fr)}}

/* =============================================================== Misc */
code{padding:1px 6px;border-radius:var(--hp-r-xs);background:var(--hp-surface-3);color:var(--hp-text);font-family:var(--hp-mono);font-size:12.5px;word-break:normal;overflow-wrap:anywhere}
.logbox{background:#0f1419;color:#d0d5dd;border:1px solid #222932;border-radius:var(--hp-r-sm)}
.editor{background:var(--hp-surface-2);border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);color:var(--hp-text);font-family:var(--hp-mono)}
.editor:focus{border-color:var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--hp-accent-soft);color:var(--hp-accent-text);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.score-ring .ring,.ring{background:conic-gradient(var(--hp-accent) calc(var(--p) * 1%),var(--hp-surface-3) 0)}
.ring::before{background:var(--hp-surface)}
.check-list li{border-top:1px solid var(--hp-divider)}
.check-list li.ok>svg,.check-list .ok>svg{color:var(--hp-ok)}
.check-list li.todo>svg,.check-list .todo>svg{color:var(--hp-warn)}
.check-list b{font-weight:600}
.check-list small{color:var(--hp-muted);font-size:13px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-s,.qa-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-pill);background:var(--hp-surface);font-size:13px;font-weight:600;color:var(--hp-text-2)}
.chip-s svg,.qa-chip svg{width:16px;height:16px;color:var(--hp-accent-text)}
.qa-chip:hover{background:var(--hp-hover);border-color:var(--hp-border-strong);color:var(--hp-text)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.btn-row.center{justify-content:center}
.row-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
/* legacy accent band ("Need help?", "Can't find…") until its page re-marks it up */
.card.support{background:var(--hp-accent);border-color:var(--hp-accent);color:var(--hp-on-accent)}
.card.support h2,.card.support strong{color:inherit}
/* cards and tiles never move on hover (a transform would trap fixed menus): border and shadow only */
.stat:hover,.ess-item:hover,.kb-cat:hover,.order-card:hover{transform:none}

/* =============================================================== Cross-package pieces */
/* hosting warning line (partials/user/hosting-warn) */
.hp-warn-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0;font-size:13px;font-weight:500;line-height:1.4;color:var(--hp-warn)}
.hp-warn-line svg{width:16px;height:16px;flex:none}
.hp-warn-line a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hp-warn-line .hp-warn-sep{color:var(--hp-subtle)}
/* Tools menu (partials/user/hosting-tools) */
.dd.hp-tools{display:inline-block}
.hp-tools>.dd-menu{min-width:240px;max-height:min(70vh,480px);overflow-y:auto}
.hp-tools-note{display:block;max-width:260px;padding:8px 10px;font-size:13px;line-height:1.45;color:var(--hp-muted);white-space:normal}
.hp-tools-note a{color:var(--hp-accent-text);font-weight:600}
.hp-tools-note a:hover{text-decoration:underline}
/* "Hosting panel not available" / "We couldn't load this page" (partials/user/live-fail): a warning, as in the file manager */
.hp-live-fail .es-ico{background:var(--hp-warn-soft);color:var(--hp-warn)}
/* skip link (every customer layout): accent fill, readable text whatever the brand colour (§2.3) */
.skip{background:var(--hp-accent);color:var(--hp-on-accent);font-weight:600;border-radius:var(--hp-r-sm)}
/* status screen */
.auth-state{text-align:center}
.as-ico{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--hp-accent-soft);color:var(--hp-accent-text)}
.as-ico svg{width:24px;height:24px}
.as-ico.ok{background:var(--hp-ok-soft);color:var(--hp-ok)}
.as-ico.warn{background:var(--hp-warn-soft);color:var(--hp-warn)}
.as-ico.bad{background:var(--hp-bad-soft);color:var(--hp-bad)}
.as-ico.info{background:var(--hp-info-soft);color:var(--hp-info)}
.as-ico.big{width:64px;height:64px}
.as-ico.big svg{width:30px;height:30px}
.auth-state h1.auth-title{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.auth-state h3{font-size:18px;font-weight:600}
.auth-state .kv{margin-top:16px;text-align:left}
/* step markers: order wizard (.steps) and signup verification (.vsteps) */
.steps li>span,.vstep .vnum{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;background:var(--hp-surface-3);color:var(--hp-muted);border:1px solid var(--hp-border)}
.steps li.active>span,.vstep.active .vnum{background:var(--hp-surface);color:var(--hp-accent-text);border:2px solid var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
.steps li.done>span,.vstep.done .vnum{background:var(--hp-accent);color:var(--hp-on-accent);border:1px solid var(--hp-accent);box-shadow:none}
.steps li>span svg,.vstep .vnum svg{width:14px;height:14px;stroke-width:3}
/* code box: a mono value and its Copy button in one row; the value scrolls rather than breaking mid-word */
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:10px 12px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);background:var(--hp-surface-2)}
.code-box code{flex:1;min-width:0;padding:0;background:none;font-size:14px;letter-spacing:.04em;white-space:nowrap;overflow-x:auto;word-break:normal;overflow-wrap:normal;scrollbar-width:thin}
.code-box>.btn{flex:none}
/* setting row: text left, control right */
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--hp-divider)}
.setting:first-child{padding-top:4px}
.setting:last-child{border-bottom:0;padding-bottom:4px}
.setting>div:first-child{flex:1;min-width:0}
.setting>:last-child:not(:first-child){flex:none}
.setting b{display:block;font-size:14px;font-weight:600;color:var(--hp-text)}
.setting small{display:block;max-width:560px;margin-top:2px;font-size:13px;color:var(--hp-muted)}
/* OTP boxes */
.otp{display:flex;justify-content:center;gap:8px;margin:8px 0 20px}
.otp input{width:48px;max-width:none;height:48px;flex:none;padding:0;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-sm);background:var(--hp-surface);color:var(--hp-text);font-size:20px;font-weight:700;text-align:center}
.otp input:focus{outline:0;border-color:var(--hp-accent);box-shadow:0 0 0 3px var(--hp-accent-ring)}
/* wallet balance card */
.card.wallet-hero{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:24px;border:0;background:var(--hp-accent);color:var(--hp-on-accent);box-shadow:var(--hp-sh-sm)}
/* secondary text: 92% of the on-accent colour (≈5:1 on the default green), never a faded opacity */
.wallet-hero small{display:block;font-size:13px;font-weight:500;opacity:1;color:color-mix(in srgb,var(--hp-on-accent) 92%,transparent)}
.wallet-hero strong{display:block;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.wallet-hero span{font-size:13px;opacity:1}
.wallet-hero div>span{color:color-mix(in srgb,var(--hp-on-accent) 92%,transparent)}
.wallet-hero.small strong{font-size:26px}
/* authenticator QR: a white tile in both themes */
.qr-box{display:grid;justify-items:center;gap:8px;margin:0 0 16px}
.qr-box svg{padding:12px;border:1px solid var(--hp-border);border-radius:var(--hp-r-md);background:#fff}
.qr-box p{font-size:13px;color:var(--hp-muted)}
/* pay modal (core/pay.js): opens on billing, order, domains and hosting pages */
.pay-amount{margin:0 0 16px;padding:16px;border:1px solid var(--hp-border);border-radius:var(--hp-r-md);background:var(--hp-surface-2);text-align:left}
.pay-amount small{display:block;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--hp-muted)}
.pay-amount strong{display:block;margin-top:2px;font-size:28px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--hp-text)}
#payAlert>.alert{margin:0 0 12px}
.pay-methods{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.pay-methods .pm,label.pm{position:relative;display:flex;align-items:center;gap:12px;padding:12px 46px 12px 12px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-md);background:var(--hp-surface);cursor:pointer;transition:border-color var(--hp-t),background-color var(--hp-t)}
.pay-methods .pm::after,label.pm::after{content:"";position:absolute;top:50%;right:16px;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.5px solid var(--hp-border-strong);background:var(--hp-surface);box-sizing:border-box}
.pay-methods .pm:hover:not(.off){border-color:var(--hp-subtle)}
.pay-methods .pm.on,label.pm.on{border-color:var(--hp-accent);background:var(--hp-accent-soft)}
.pay-methods .pm.on::after,label.pm.on::after{border:5px solid var(--hp-accent)}
.pay-methods .pm.off,label.pm.off{opacity:.55;cursor:not-allowed}
.pay-methods .pm:has(input:focus-visible){outline:2px solid var(--hp-accent);outline-offset:2px}
.pay-methods .pm .pm-ico,.pm .pm-ico{width:40px;height:40px;border-radius:10px;border:1px solid var(--hp-border);background:var(--hp-surface);color:var(--hp-accent-text)}
.pay-methods .pm b{font-size:14px;font-weight:600;color:var(--hp-text)}
.pay-methods .pm small{font-size:13px;color:var(--hp-muted)}
.pm-panel p{font-size:13px;color:var(--hp-muted)}
.pm-panel b{color:var(--hp-text)}
.secure-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--hp-divider);font-size:12px;color:var(--hp-muted)}
.secure-note svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--hp-ok)}

/* =============================================================== ≤1023 (legacy 900px rules restated) */
@media (max-width:1023px){
  .radio-cards.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =============================================================== ≤767: phones (legacy 640px rules restated) */
@media (max-width:767px){
  .card{padding:16px}
  .card.hp-flush,.card:has(>.table-wrap:first-child){padding:0}
  .card.hp-flush>.card-head{padding:16px}
  .card.hp-flush>.table-wrap,.card:has(>.table-wrap:first-child)>.table-wrap{padding:12px}
  .service-list,.usage{grid-template-columns:minmax(0,1fr)}
  .ess{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-date{display:none}
  .form-grid,.radio-cards{grid-template-columns:minmax(0,1fr)}
  .hide-sm{display:none!important}
  .toolbar{align-items:stretch}
  .search-box{flex:1 1 100%;width:auto;min-width:0}
  .toolbar-r{width:100%}
  .inline-form,.copy-field{flex-direction:column}
  .kv>div{grid-template-columns:minmax(0,1fr);gap:2px}

  /* stats: 2 columns, a final odd tile spans both */
  .stats,.stats.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .stats>.stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat{padding:14px;grid-template-columns:32px minmax(0,1fr);column-gap:10px}
  .stat .s-ico{width:32px;height:32px;border-radius:8px}
  .stat .s-ico svg{width:18px;height:18px}
  .stat strong{font-size:clamp(16px,4.8vw,20px)}

  .hp-acct{grid-template-columns:48px minmax(0,1fr);gap:12px 14px;padding:16px}
  .hp-acct>.hp-ico.lg{width:48px;height:48px;border-radius:12px;align-self:start}
  .hp-acct-name{font-size:18px}
  .hp-acct-btns>*{flex:1 1 100%}
  .hp-acct-btns>.btn{width:100%}
  .hp-acct-btns>.btn-primary{order:-1}   /* primary action first, as in page heads */

  .page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
  .page-head h1{font-size:20px}
  .head-btns{width:100%}
  .head-btns>*{flex:1 1 auto}
  .head-btns .btn-primary{order:-1;flex:1 1 100%}

  .card.banner{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .card.banner>.btn,.card.banner>a.btn{width:100%}
  .card.banner>.b-ico{align-self:flex-start}

  /* tables become cards; every value labelled with its column (panel.js labelTables) */
  .table-wrap:has(>.tbl:not(.perm-table)){overflow-x:visible}
  .tbl:not(.perm-table),.tbl:not(.perm-table)>tfoot{display:block;width:100%}
  .tbl:not(.perm-table)>tbody{display:flex;flex-direction:column;gap:10px;width:100%}
  .tbl:not(.perm-table)>thead{display:none}
  .tbl:not(.perm-table) tr{display:block;padding:14px;border:1px solid var(--hp-border);border-radius:var(--hp-r-md);background:var(--hp-surface)}
  .tbl:not(.perm-table) tr[hidden]{display:none}
  .tbl:not(.perm-table) tr.click:hover{background:var(--hp-hover)}
  .tbl:not(.perm-table) tr.click:hover td{background:none}
  .tbl:not(.perm-table) td{display:flex;justify-content:space-between;align-items:center;gap:12px;height:auto;padding:4px 0;border:0;text-align:right;max-width:none;white-space:normal;overflow-wrap:anywhere;word-break:normal;width:auto!important;min-width:0!important}
  .tbl:not(.perm-table) td[data-label]::before{content:attr(data-label);flex:none;max-width:45%;font-size:12px;font-weight:500;color:var(--hp-muted);text-align:left}
  .tbl:not(.perm-table) td:not([data-label]),.tbl:not(.perm-table) td[data-label=""]{justify-content:flex-start;text-align:left}
  .tbl:not(.perm-table) td:first-child{justify-content:flex-start;padding-bottom:8px;font-weight:600;text-align:left}
  .tbl:not(.perm-table) td:first-child::before{display:none}
  .tbl:not(.perm-table) td[colspan]{display:block;text-align:left}
  .tbl:not(.perm-table) td.act,.tbl:not(.perm-table) td[data-label=""]:last-child:not(:first-child){justify-content:flex-end;padding-top:8px}
  .tbl:not(.perm-table) td .pill,.tbl:not(.perm-table) td .badge,.tbl:not(.perm-table) td small,.tbl:not(.perm-table) td>span.muted:last-child{white-space:nowrap}

  /* segmented filters wrap into pills instead of scrolling */
  .seg:not(.view-toggle){flex-wrap:wrap;overflow:visible;gap:6px;max-width:100%;padding:0;background:none;border-radius:0;box-shadow:none}
  .seg:not(.view-toggle) a,.seg:not(.view-toggle) button{min-height:40px;padding:0 14px;border:1px solid var(--hp-border-strong);border-radius:var(--hp-r-pill);background:var(--hp-surface)}
  .seg:not(.view-toggle) .active,:root[data-theme="dark"] .seg:not(.view-toggle) .active{border-color:var(--hp-accent-line);background:var(--hp-accent-soft);color:var(--hp-accent-text);box-shadow:none}
  .seg.view-toggle a,.seg.view-toggle button{min-height:36px;min-width:36px}

  /* modal becomes a bottom sheet; the primary action sits on top */
  .modal{padding:0;align-items:end}
  .modal-card,.modal-card.sm,.modal-card.lg{width:100%;max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0;border-bottom:0}
  .modal-head{padding:16px 16px 14px}
  .modal-body{padding:16px}
  .modal-foot{flex-direction:column-reverse;align-items:stretch;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:0}
  .modal-foot>.btn{width:100%}

  .toasts{left:12px;right:12px;bottom:12px;align-items:stretch;max-width:none}
  .tst{min-width:0;max-width:none}

  /* touch targets */
  .btn,.btn-sm{min-height:40px}
  .icon-btn,.icon-btn.sm,.copy{width:40px;height:40px}
  .tabs a{min-height:44px}
  .dd-menu>a,.dd-menu>button{min-height:44px}
  .switch::before{content:"";position:absolute;inset:-10px -2px}
  label.check{min-height:40px;align-items:center}
  .chip-s,.qa-chip{min-height:40px}

  /* radio cards: a little tighter, the dot follows */
  label.rc:has(>input[type=radio]){padding:14px 44px 14px 14px}
  label.rc:has(>input[type=radio])::after{right:14px}

  /* the toolbar on top of a flush card lines up with the 12px around its row cards */
  .card.hp-flush>.toolbar{padding:12px}
}
@media (max-width:479px){
  .otp{gap:6px}
  .otp input{width:44px;height:44px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .shake{animation:none!important}
  .btn,.icon-btn,.stat,.hp-svc,.hp-row,.rc,.pm,.switch,.switch i{transition:none!important}
}

/* External hosting: Contact support state */
.hp-support-tag{margin-left:6px;padding:1px 8px;border-radius:var(--hp-r-pill);font-size:11px;font-weight:600;background:var(--hp-hover);color:var(--hp-muted);white-space:nowrap}
.is-support{color:var(--hp-text-2)}
.btn-primary.is-support{color:var(--hp-on-accent)}   /* a primary button keeps its text colour on the accent fill (WordPress empty state) */
/* the tag drops below the label where the button or chip is narrow (Server details row, quick-action grid) instead of overflowing */
.btn.is-support{flex-wrap:wrap;row-gap:2px;max-width:100%;padding-top:4px;padding-bottom:4px;white-space:normal}
.qa-chip.is-support{flex-wrap:wrap;row-gap:2px}
.qa-chip.is-support>span{flex:1 1 0}
.qa-chip.is-support::after{content:"";flex-basis:100%;order:1}   /* the tag always starts a line of its own, under the label */
.qa-chip.is-support .hp-support-tag{order:2;margin-left:28px}
.ess-item.is-support small{color:var(--hp-accent-text)}
.hp-needs-support .es-ico{background:var(--hp-accent-soft);color:var(--hp-accent-text)}