/* Getwebup customer panel: shared components ("Getwebup Console" restyle of the 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. Cards and tiles are flat (border, no shadow) at rest; on hover a card gets a
   tinted line and a soft shadow, and only a tile that can't hold a menu lifts (see "Motion" at the end of this file).
   Colours come from hp/tokens.css only; the brand accent only through --hp-accent* (Brand::css()), never a fixed hex. */

/* =============================================================== Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;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:36px;padding:0 14px;gap:6px;font-size:13px}
.btn-sm svg{width:16px;height:16px}
.btn-lg{min-height:48px;padding:0 22px;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)}
/* outline buttons: ink text on white with a firm border (demo "Register a domain", "Manage") */
.btn-outline,.btn-ghost,.btn-chip{background:var(--hp-surface);border:1px solid var(--hp-border-strong);color:var(--hp-text)}
.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:#0e1512}
.btn-white:hover:not(:disabled){background:#eef0ef;border-color:#eef0ef;color:#0e1512}
.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:8px}
.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:none}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px;min-height:24px}
.card-head h2{font-family:var(--hp-font-display);font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.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:18px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:none;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:var(--hp-r-sm);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:14px;line-height:1.35;color:var(--hp-muted)}
.stat strong{grid-column:1/-1;min-width:0;font-family:var(--hp-font-display);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;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:13px;font-style:normal;font-weight:600;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}

/* the white account strip on hosting sub-pages (hp/hosting.css turns the overview's into the ink hero) */
.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:18px 22px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-md);box-shadow:none}
.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-family:var(--hp-font-display);font-size:20px;font-weight:800;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:none;transition:box-shadow var(--hp-t),border-color var(--hp-t)}
.hp-svc:hover{box-shadow:none;border-color:var(--hp-border-strong)}
/* inner tile: a service inside a card (dashboard "Your services") is a lighter row, not a card in a card */
.card .hp-svc{border-color:var(--hp-divider);border-radius:var(--hp-r-in)}
.card .hp-svc:hover{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 small.muted{display:inline}   /* "₹49/mo + GST" stays on one line */
.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:none}
.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:none;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}
/* no header band: muted column labels over one hairline (demo tables) */
.tbl th{padding:12px 16px;background:transparent;border-bottom:1px solid var(--hp-border);font-size:13px;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:8px;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}
/* in-page search: a well (surface-2) that turns white while you type */
.search-box{display:flex;align-items:center;gap:8px;width:320px;max-width:100%;min-width:0;flex:0 1 320px;height:44px;padding:0 12px;border:1px solid var(--hp-border);border-radius:var(--hp-r-sm);background:var(--hp-surface-2);color:var(--hp-muted);transition:border-color var(--hp-t),box-shadow var(--hp-t),background-color var(--hp-t)}
.search-box:focus-within{border-color:var(--hp-accent);background:var(--hp-surface);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:44px;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:44px;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:42px;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(14,21,18,.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-in);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 small small{display:inline}   /* "₹899 + GST" on a renewal period card */
/* on the accent tint the muted grey can fall under 4.5:1 (a light brand colour in dark mode): one step stronger there */
.rc.on small,.rc:has(input:checked) small{color:var(--hp-text-2)}
.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:3px 10px;border:0;border-radius:var(--hp-r-pill);font-size:12.5px;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 */
/* banners: a soft tone fill inside a full 1px tone border (demo "Invoice due"), never a coloured left edge */
.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-radius:var(--hp-r-md);background:var(--hp-info-soft);box-shadow:none;color:var(--hp-text)}
.card.banner.warn-card{border:1px solid var(--hp-warn-line);background:var(--hp-warn-soft)}
.card.banner.bad-card{border:1px solid var(--hp-bad-line);background:var(--hp-bad-soft)}
.card.banner.ok-card{border:1px solid var(--hp-ok-line);background:var(--hp-ok-soft)}
.card.banner.info-card{border:1px solid var(--hp-info-line);background:var(--hp-info-soft)}
.card.banner .b-ico{width:40px;height:40px;border-radius:var(--hp-r-sm);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.warn-card .b-main p{color:var(--hp-warn-ink)}
.card.banner>.btn,.card.banner>a.btn,.card.banner>.btn-row{flex:none}
/* the primary action of a warn or bad banner is an ink button (demo "Pay now"); it inverts in dark mode. Stated with its
   own :hover:not(:disabled) because theme.css .btn-primary:hover:not(:disabled) is 0,3,0. Info and ok banners keep the accent. */
.card.banner.warn-card>.btn-primary,.card.banner.bad-card>.btn-primary{background:var(--hp-btn-ink-bg);border-color:var(--hp-btn-ink-bg);color:var(--hp-btn-ink-fg)}
.card.banner.warn-card>.btn-primary:hover:not(:disabled),.card.banner.bad-card>.btn-primary:hover:not(:disabled){background:var(--hp-btn-ink-hover);border-color:var(--hp-btn-ink-hover);color:var(--hp-btn-ink-fg)}
.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-in);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:8px;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-in);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:8px;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(14,21,18,.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-family:var(--hp-font-display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.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)}
/* ink toasts (the demo's ink surface); in dark mode a raised surface instead, so they do not melt into the page */
.tst{min-width:280px;max-width:420px;padding:12px 10px 12px 14px;border:0;border-radius:var(--hp-r-in);background:var(--hp-ink);color:var(--hp-on-ink);box-shadow:var(--hp-sh-lg);font-size:14px;line-height:1.45}
.tst>svg{width:20px;height:20px;color:#a5b4fc}
.tst.success>svg{color:#47cd89}
.tst.error>svg{color:#f97066}
.tst.warn>svg{color:#f5b454}
.tst button{width:28px;height:28px;border-radius:var(--hp-r-xs);color:var(--hp-on-ink-2)}
.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:6px;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-family:var(--hp-font-display);font-size:16px;font-weight:700;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-family:var(--hp-font-display);font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--hp-text)}
.page-head p{margin-top:4px;font-size:15px;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:#0b100e;color:#c9d2cd;border:1px solid #25302a;border-radius:var(--hp-r-sm)}   /* a terminal: dark in both themes */
.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 help band ("Need help?", "Can't find…") until its page re-marks it up: an ink card, as the demo's help card */
.card.support{background:var(--hp-ink);border-color:var(--hp-ink-line);color:var(--hp-on-ink)}
.card.support h2,.card.support strong{color:inherit}
/* the legacy theme.css hover transforms stay off (a transform would trap fixed menus); the lift of a menu-free tile is the
   separate translate property, set under "Motion" */
.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);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: an ink card (demo hero), the same in every brand colour; the hairline keeps it apart from the
   dark page. Its .btn-white stays white. */
.card.wallet-hero{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:24px;border:1px solid var(--hp-ink-line);border-radius:var(--hp-r-lg);background:var(--hp-ink);color:var(--hp-on-ink);box-shadow:none}
/* secondary text on ink: --hp-on-ink-2 (12:1), never a faded opacity */
.wallet-hero small{display:block;font-size:13px;font-weight:500;opacity:1;color:var(--hp-on-ink-2)}
.wallet-hero strong{display:block;font-family:var(--hp-font-display);font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wallet-hero span{font-size:13px;opacity:1}
.wallet-hero div>span{color:var(--hp-on-ink-2)}
.wallet-hero.small strong{font-size:26px}
/* focus on ink: a white ring (an accent ring can fall under 3:1 on ink with a mid-tone brand colour) */
.card.wallet-hero :focus-visible,.card.support :focus-visible{outline-color:#fff}
/* 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-in);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-family:var(--hp-font-display);font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.02em;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-in);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)}
.pay-methods .pm.on small,label.pm.on small{color:var(--hp-text-2)}
.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)}
/* manual payment, bank transfer / UPI (App\Services\ManualPayment): the modal's panel (core/pay.js payManualPanel) and its twin
   card on the invoice page (partials/user/bank-transfer, #bankPay). Long UPI ids and account numbers wrap instead of scrolling. */
.pay-bank{display:flex;flex-direction:column;gap:12px}
.pay-bank>p,.hp-bank p{margin:0}
.pm-panel .pay-bank>p:first-child,.hp-bank .hp-bank-lead{font-size:14px;color:var(--hp-text)}
.pay-upi small,.pay-ref small{display:block;font-size:12px;font-weight:500;color:var(--hp-muted)}
.pay-upi .code-box,.pay-ref .code-box{margin-top:4px;padding:6px 6px 6px 12px}
.pay-upi .code-box code,.pay-ref .code-box code,.hp-bank .kv dd>span{white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal}
.pay-upi .code-box{border-color:var(--hp-accent-line);background:var(--hp-accent-soft)}
.pay-upi .code-box code{font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--hp-text)}
.pay-bank .kv>div,.hp-bank .kv>div{align-items:center;padding:6px 0}
.pay-bank .kv dd,.hp-bank .kv dd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.pay-bank .kv dd>span,.hp-bank .kv dd>span{min-width:0}
.pay-bank .icon-btn.sm,.hp-bank .icon-btn.sm{width:44px;height:44px;flex:none;border-radius:var(--hp-r-sm);color:var(--hp-accent-text)}
.pay-bank .icon-btn.sm:hover,.hp-bank .icon-btn.sm:hover{background:var(--hp-hover);color:var(--hp-accent-text)}
.pm-panel .pay-bank-note,.hp-bank .pay-bank-note{font-size:12px;color:var(--hp-muted)}
.pay-bank .btn,.hp-bank .btn,.pm-panel>.btn{white-space:normal;text-align:center}
.pm-panel>p.muted+.btn{margin-top:12px}
.hp-bank{display:flex;flex-direction:column;gap:12px;margin:0}
.hp-bank>.card-head{margin:0}
.hp-bank>.btn{align-self:flex-start}
/* the staff's instructions (escaped, line breaks kept) */
.pay-instructions,.pm-panel p.pay-instructions{margin:0;padding:12px;border:1px solid var(--hp-border);border-radius:var(--hp-r-sm);background:var(--hp-surface-2);font-size:13px;line-height:1.5;color:var(--hp-text-2);overflow-wrap:anywhere;word-break:normal}
/* "Pay with a UPI app": a upi:// link, useful on phones only (a desktop has no UPI app to open it) */
.pay-bank .btn.pay-upi-app,.hp-bank .btn.pay-upi-app{align-self:stretch}
@media (hover:hover) and (pointer:fine){.pay-bank .btn.pay-upi-app,.hp-bank .btn.pay-upi-app{display:none}}
/* "Already paid?": the reference (UTR) the customer sends; in the modal the footer button submits it, on the page its own button */
.pay-report{display:flex;flex-direction:column;gap:12px;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--hp-divider)}
.pay-report h3,.pay-report h4{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:var(--hp-text)}
.pay-report>p,.pm-panel .pay-report>p{margin:0;font-size:13px;color:var(--hp-muted)}
.pay-report .field{width:100%;min-width:0;margin:0}
.pay-report .input{width:100%;min-height:44px}
.hp-bank .pay-report .btn{align-self:flex-start}
/* the ticket fallback: a text link with a full 44px tap target */
.link.pay-ticketlink{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-size:13px;overflow-wrap:anywhere}
/* "Sent the wrong reference?" under the reported banner (invoice page) */
.card.banner:has(details.pay-again){align-items:flex-start}
details.pay-again{margin-top:4px}
details.pay-again>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--hp-accent-text)}
details.pay-again>summary::-webkit-details-marker{display:none}
details.pay-again>summary::before{content:"";width:6px;height:6px;margin:0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:-45deg;transition:rotate var(--hp-t)}
details.pay-again[open]>summary::before{rotate:45deg}
details.pay-again>summary:focus-visible{outline:2px solid var(--hp-accent);outline-offset:2px;border-radius:var(--hp-r-xs)}
details.pay-again .pay-report{margin:0;padding-top:12px;border-top-color:var(--hp-info-line)}
details.pay-again .input{background:var(--hp-surface)}
@media (max-width:767px){
  .hp-bank>.btn,.hp-bank .pay-report .btn,details.pay-again .pay-report .btn{align-self:stretch}
}
@media (prefers-reduced-motion:reduce){details.pay-again>summary::before{transition:none}}
@media print{.hp-bank,.pay-report,details.pay-again{display:none!important}}

/* =============================================================== ≤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:22px}
  .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-in);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:var(--hp-r-lg) var(--hp-r-lg) 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: 44px buttons, 40px for the small row controls */
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  .icon-btn{width:44px;height:44px}
  .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)}

/* =============================================================== Motion
   Every customer layout loads this file, so the shared motion lives here; a page package adds its own tiles at the end of
   its file. The rules:
   - Only opacity, the separate translate / scale / rotate properties and background-position (shine, shimmer) move.
     Never `transform` on page elements: nav.js (fitMenu) and ui.js set it inline on menus, and legacy rules use it.
     Nothing animates a layout property, so nothing shifts.
   - All of it sits under prefers-reduced-motion:no-preference: with reduced motion the panel is the still design.
   - Entrances fill backwards only: the element is visible by default, the animation starts it lower and transparent, and
     once it ends nothing stays on the element (a lasting translate would trap ui.js's position:fixed row menus).
     Each animated block exports its delay (--hp-d; rows --hp-dr, tiles --hp-dt) so what is inside it follows it in.
   - Only tiles that cannot hold a menu (.dd / .row-dd) lift on hover; other cards get a tinted line and a soft shadow.
   - Meters and score rings start empty only under html.js-motion and fill when the motion script (shared/js/ui.js
     "Motion") marks them .is-inview; without that script they are simply full. */

@keyframes hp-rise{from{opacity:0;translate:0 var(--hp-rise,12px)}}
@keyframes hp-fade{from{opacity:0}}
@keyframes hp-pop{from{opacity:0;scale:.86}}
@keyframes hp-pop-sm{from{opacity:.4;scale:.94}}
@keyframes hp-menu{from{opacity:0;translate:0 -6px}}
@keyframes hp-menu-up{from{opacity:0;translate:0 6px}}
@keyframes hp-fill{from{scale:0 1}}
@keyframes hp-grow{from{scale:1 0}}
@keyframes hp-ring{from{opacity:0;rotate:-150deg;scale:.84}}
@keyframes hp-ring-back{from{rotate:150deg}}
@keyframes hp-ping{0%{opacity:.5;scale:1}70%,100%{opacity:0;scale:2.6}}
@keyframes hp-ping-soft{0%{opacity:.45;scale:1}35%,100%{opacity:0;scale:1.6}}
@keyframes hp-drift{0%{translate:-6% -4%;rotate:0deg}50%{translate:5% 6%;rotate:14deg}100%{translate:8% -5%;rotate:-10deg}}
@keyframes hp-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes hp-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hp-bell{0%,100%{rotate:0deg}15%{rotate:16deg}30%{rotate:-13deg}45%{rotate:9deg}60%{rotate:-6deg}75%{rotate:3deg}}
@keyframes hp-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes hp-vt-in{from{opacity:0;transform:translateY(12px)}}

/* ink cards (wallet, the legacy help band; the dashboard help card, the KB help band and the hosting hero are listed here
   so one glow serves them all): a soft accent glow inside the ink, under the content. None of them holds a menu, so the
   clip and the stacking context are safe. It drifts under "Motion" below. */
.card.wallet-hero,.card.support,.hp-p-dashboard .card.hp-dash-help,.card.hp-sup-band,.hp-p-hosting-overview .hp-acct{position:relative;isolation:isolate;overflow:hidden}
.card.wallet-hero::before,.card.support::before,.hp-p-dashboard .card.hp-dash-help::before,.card.hp-sup-band::before,.hp-p-hosting-overview .hp-acct::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(280px 200px at 76% 26%,var(--hp-glow),transparent 72%),radial-gradient(240px 180px at 22% 82%,color-mix(in srgb,var(--hp-glow) 60%,transparent),transparent 72%)}

/* skeletons: a neutral bar in both themes (its shimmer is motion, below) */
.skel{background:linear-gradient(100deg,var(--hp-skel) 40%,var(--hp-skel-hi) 50%,var(--hp-skel) 60%) 0 0/300% 100% no-repeat;border-radius:var(--hp-r-xs)}

/* ---------- page to page: the opt-in stays top level (nested in a no-preference @media block, Chromium skips the incoming
   page's transition); reduced motion opts out with its own rule, and any transition that still runs is instant */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media (prefers-reduced-motion:no-preference){
  /* ---------- page to page: a quick fade and rise of the page, under bars that stay put (names: hp/shell.css, hp/auth.css) */
  ::view-transition-group(*){animation-duration:.22s;animation-timing-function:var(--hp-ease)}
  ::view-transition-old(root){animation:.16s var(--hp-ease) both hp-vt-out;mix-blend-mode:normal}
  ::view-transition-new(root){animation:.3s var(--hp-ease-out) .05s both hp-vt-in;mix-blend-mode:normal}

  /* ---------- entrance. --hp-mi: a child's place among its siblings, 0…8 (the 9th and later start together) */
  :where(#view.content,.auth2,.bare) :nth-child(1){--hp-mi:0}
  :where(#view.content,.auth2,.bare) :nth-child(2){--hp-mi:1}
  :where(#view.content,.auth2,.bare) :nth-child(3){--hp-mi:2}
  :where(#view.content,.auth2,.bare) :nth-child(4){--hp-mi:3}
  :where(#view.content,.auth2,.bare) :nth-child(5){--hp-mi:4}
  :where(#view.content,.auth2,.bare) :nth-child(6){--hp-mi:5}
  :where(#view.content,.auth2,.bare) :nth-child(7){--hp-mi:6}
  :where(#view.content,.auth2,.bare) :nth-child(8){--hp-mi:7}
  :where(#view.content,.auth2,.bare) :nth-child(n+9){--hp-mi:8}
  /* layout boxes never move; they pass their place on: --hp-dc on a top-level box, --hp-dk on a column inside it */
  :where(#view.content)>*{--hp-dc:min(calc(var(--hp-mi,0) * var(--hp-step)),var(--hp-step-max))}
  :where(#view.content>*)>*{--hp-dk:min(calc(var(--hp-dc,0ms) + var(--hp-mi,0) * var(--hp-step)),var(--hp-step-max))}
  /* A: page blocks (back link, crumbs, page head, banners, cards, toolbars, tabs …) */
  :where(#view.content)>:where(:not(.hp-ctxbar,.hp-split,.grid,.stats,.cols-2,.cols-3,.hp-tiles,.hp-svc-grid,.hp-stack,.stack,script,style,link,template)){--hp-d:var(--hp-dc);animation:hp-rise .5s var(--hp-ease-out) backwards;animation-delay:var(--hp-d)}
  /* B: the tiles and cards of a top-level grid or stack */
  :where(#view.content>:is(.hp-split,.grid,.stats,.cols-2,.cols-3,.hp-tiles,.hp-svc-grid,.hp-stack,.stack))>:where(:not(.col-main,.col-side,.hp-stack,.stack)){--hp-d:var(--hp-dk);animation:hp-rise .5s var(--hp-ease-out) backwards;animation-delay:var(--hp-d)}
  /* C: the cards of a column (or of a stack inside a grid) */
  :where(#view.content>:is(.hp-split,.grid,.hp-stack,.stack)>:is(.col-main,.col-side,.hp-stack,.stack))>*{--hp-d:min(calc(var(--hp-dk,0ms) + var(--hp-mi,0) * var(--hp-step)),var(--hp-step-max));animation:hp-rise .5s var(--hp-ease-out) backwards;animation-delay:var(--hp-d)}
  /* D: tiles inside a card follow it in (service tiles, quick actions, tool tiles, plans, meters, checks, chips, messages) */
  :where(#view.content :is(.hp-svc-grid,.hp-dash-qa,.hp-host-qa,.ess,.hp-tiles,.hp-ord-plans,.radio-cards,.usage,.hp-tool-meters,.check-list,.hp-bill-chips,.thread))>*{--hp-dt:calc(var(--hp-d,0ms) + 120ms + var(--hp-mi,0) * 45ms);animation:hp-rise .5s var(--hp-ease-out) backwards;animation-delay:var(--hp-dt)}
  /* E: list and table rows rise a little less; only the first 12 move (the rest are below the fold and come with their card) */
  :where(#view.content :is(.hp-list,.hp-host-list,#notifList,.tbl>tbody))>:nth-child(-n+12){--hp-rise:6px;--hp-dr:calc(var(--hp-d,0ms) + 90ms + var(--hp-mi,0) * 32ms);animation:hp-rise .42s var(--hp-ease-out) backwards;animation-delay:var(--hp-dr)}
  /* empty states and status screens (order complete): the icon pops in after its card */
  :where(#view.content) :is(.empty-state .es-ico,.auth-state .as-ico){animation:hp-pop .55s var(--hp-ease-spring) backwards;animation-delay:calc(var(--hp-d,0ms) + 180ms)}
  /* a block or row (A-E) that holds a row menu only fades: ui.js places that menu with position:fixed, and a translate,
     even mid-entrance, would make the block its containing block (the menu would open out of place) */
  :where(#view.content)>:where(:not(.hp-ctxbar,.hp-split,.grid,.stats,.cols-2,.cols-3,.hp-tiles,.hp-svc-grid,.hp-stack,.stack)):has(.row-dd),
  :where(#view.content>:is(.hp-split,.grid,.stats,.cols-2,.cols-3,.hp-tiles,.hp-svc-grid,.hp-stack,.stack))>:where(:not(.col-main,.col-side,.hp-stack,.stack)):has(.row-dd),
  :where(#view.content>:is(.hp-split,.grid,.hp-stack,.stack)>:is(.col-main,.col-side,.hp-stack,.stack))>:has(.row-dd),
  :where(#view.content :is(.hp-svc-grid,.hp-dash-qa,.hp-host-qa,.ess,.hp-tiles,.hp-ord-plans,.radio-cards,.usage,.hp-tool-meters,.check-list,.hp-bill-chips,.thread))>:has(.row-dd),
  :where(#view.content :is(.hp-list,.hp-host-list,#notifList,.tbl>tbody))>:has(.row-dd){animation-name:hp-fade}

  /* ---------- cards: a tinted line and a soft shadow on hover (below); no movement, a card can hold menus and forms */
  :where(#view) .card{transition:border-color .2s var(--hp-ease),box-shadow .25s var(--hp-ease)}
  /* tiles that are links, and menu-free service tiles, lift (the id outranks the page packages' own hover and transition) */
  #view :is(a.card:not(.banner),a.stat,.hp-svc:not(:has(.dd,.row-dd))){transition:translate .3s var(--hp-ease-out),box-shadow .3s var(--hp-ease-out),border-color .2s var(--hp-ease),background-color .2s var(--hp-ease)}
  #view :is(a.card:not(.banner),a.stat,.hp-svc:not(:has(.dd,.row-dd))):active{translate:0 -1px;transition-duration:.1s}
  #view :is(a.stat .s-ico,.hp-svc .hp-ico,a.card .hp-ico){transition:scale .35s var(--hp-ease-spring),rotate .35s var(--hp-ease-spring),background-color var(--hp-t),color var(--hp-t)}
  #view a.card .btn svg:last-child{transition:translate .25s var(--hp-ease-out)}

  /* ---------- buttons: press, the primary's light sweep and lift, icons that answer the pointer */
  .btn{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 .2s var(--hp-ease),translate .2s var(--hp-ease-out),scale .12s var(--hp-ease)}
  .btn svg{transition:translate .25s var(--hp-ease-out),scale .3s var(--hp-ease-spring),rotate .3s var(--hp-ease-spring)}
  .btn:active:not(:disabled,.disabled,[aria-disabled="true"]){scale:.98;transition-duration:.08s}
  .icon-btn,.icon-x,.copy,.pw-toggle,#profileBtn,.chip,.qa-chip,.chip-s{transition:background-color var(--hp-t) var(--hp-ease),border-color var(--hp-t) var(--hp-ease),color var(--hp-t) var(--hp-ease),scale .12s var(--hp-ease)}
  .icon-btn:active:not(:disabled),.icon-x:active:not(:disabled),.copy:active,.pw-toggle:active{scale:.9}
  #profileBtn:active,.chip:active,.qa-chip:active{scale:.97}
  .icon-btn svg,.icon-x svg{transition:scale .3s var(--hp-ease-spring),rotate .3s var(--hp-ease-spring)}
  .btn-primary{position:relative}
  .btn-primary::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%) 130% 0/250% 100% no-repeat}
  .check input:checked+.box{animation:hp-pop-sm .3s var(--hp-ease-spring)}
  .rc:has(input:checked) .rc-ico,.rc.on .rc-ico{animation:hp-pop-sm .35s var(--hp-ease-spring)}

  /* ---------- navigation inside pages: the tab underline grows, segmented filters and menu rows ease */
  .tabs a{position:relative;transition:color var(--hp-t) var(--hp-ease)}
  .tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--hp-accent);opacity:.35;scale:0 1;transition:scale .3s var(--hp-ease-out),opacity .2s var(--hp-ease);pointer-events:none}
  .tabs a.active{border-bottom-color:transparent}
  .tabs a.active::after{opacity:1;scale:1 1;animation:hp-fill .45s var(--hp-ease-out) .12s backwards}
  .seg a,.seg button{transition:color var(--hp-t) var(--hp-ease),background-color var(--hp-t) var(--hp-ease),box-shadow var(--hp-t) var(--hp-ease),border-color var(--hp-t) var(--hp-ease),scale .12s var(--hp-ease)}
  .seg a:active,.seg button:active{scale:.96}
  .dd-menu>a,.dd-menu>button,.res-item{transition:background-color .12s var(--hp-ease),color .12s var(--hp-ease)}
  .dd-menu>a svg,.dd-menu>button svg{transition:translate .2s var(--hp-ease-out),color .12s var(--hp-ease)}
  .back-link svg{transition:translate .2s var(--hp-ease-out)}

  /* ---------- menus, results, dialogs and toasts come in (menus use translate: their `transform` belongs to nav.js) */
  .dd-menu:not([hidden]),.results:not([hidden]){animation:hp-menu .18s var(--hp-ease-out) backwards}
  .dd-menu.hp-dd-up:not([hidden]){animation-name:hp-menu-up}
  .ctx:not([hidden]){animation:hp-pop-sm .16s var(--hp-ease-out) backwards;transform-origin:top left}
  /* the dialog: the backdrop fades, the card springs up (closing is quicker: ui.js removes it after 180ms) */
  .modal{transition:opacity .16s var(--hp-ease)}
  .modal.show{transition:opacity .22s var(--hp-ease-out)}
  .modal-card{transform:translateY(16px) scale(.96);transition:transform .16s var(--hp-ease)}
  .modal.show .modal-card{transform:none;transition:transform .42s var(--hp-ease-spring)}
  /* toasts slide in from the side and spring (ui.js removes one 250ms after it starts closing) */
  .tst{transform:translateX(24px) scale(.96);transition:opacity .2s var(--hp-ease),transform .22s var(--hp-ease)}
  .tst.show{transform:none;transition:opacity .25s var(--hp-ease-out),transform .45s var(--hp-ease-spring)}
  .tst.show>svg{animation:hp-pop .5s var(--hp-ease-spring) .1s backwards}
  /* phones: the dialog is a bottom sheet that slides up; toasts rise from the tab bar */
  @media (max-width:767px){
    .modal-card,.modal-card.sm,.modal-card.lg{transform:translateY(100%)}
    .modal.show .modal-card{transform:none;transition:transform .36s var(--hp-ease-out)}
    .tst{transform:translateY(16px) scale(.96)}
    .tst.show{animation-name:gwc-toast-up}   /* in from below as well (shared components.css switches only at 640px) */
  }

  /* ---------- data: meters fill from 0, score rings swing in (the % inside stays upright and counts up: ui.js) */
  .bar>i{transform-origin:left center}
  .js-motion .bar:not(.is-inview)>i{scale:0 1}
  .js-motion .bar.is-inview>i{animation:hp-fill 1s var(--hp-ease-out) backwards;animation-delay:calc(var(--hp-dr,var(--hp-dt,var(--hp-d,0ms))) + 200ms)}
  .js-motion .ring:not(.is-inview){opacity:0}
  .js-motion .ring.is-inview,.js-motion .ring.is-inview>b{animation:hp-ring .9s var(--hp-ease-out) backwards;animation-delay:calc(var(--hp-d,0ms) + 150ms)}
  .js-motion .ring.is-inview>b{animation-name:hp-ring-back}

  /* ---------- status: live services ping softly; skeletons and "Loading…" lines shimmer */
  :is(.hp-svc-badges,.hp-host-badge,.hp-host-tags,.hp-acct-meta) .badge.ok{position:relative}
  :is(.hp-svc-badges,.hp-host-badge,.hp-host-tags,.hp-acct-meta) .badge.ok::after{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;pointer-events:none;animation:hp-ping 2.4s var(--hp-ease-out) infinite}
  /* a long list pings in its first six tiles or rows only (a few live dots read as "live"; dozens are noise and work) */
  :is(.hp-host-list,.hp-svc-grid,.hp-list)>:nth-child(n+7) .badge.ok::after{content:none}
  .skel{animation:hp-shimmer 1.4s var(--hp-ease) infinite}
  .card>p.muted:has(>.spin),.hp-fm-loading{background:linear-gradient(90deg,var(--hp-muted) 40%,var(--hp-text) 50%,var(--hp-muted) 60%) 0 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hp-shimmer 1.6s linear infinite}
  .card>p.muted:has(>.spin)>.spin,.hp-fm-loading>.spin{color:var(--hp-accent)}

  /* ---------- the ink glow drifts */
  .card.wallet-hero::before,.card.support::before,.hp-p-dashboard .card.hp-dash-help::before,.card.hp-sup-band::before,.hp-p-hosting-overview .hp-acct::before{animation:hp-drift 18s ease-in-out infinite alternate}

  /* ---------- the top loading bar: an accent comet */
  .gw-bar i{background:linear-gradient(90deg,transparent,var(--hp-accent) 45%,color-mix(in srgb,var(--hp-accent) 55%,#fff));box-shadow:0 0 10px var(--hp-accent)}
}

/* hover only with a pointer that hovers (no lift left behind after a tap) */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  :where(#view) .card:where(:not(.banner,.wallet-hero,.support,.hp-dash-help,.hp-sup-band,.hp-light)):hover{border-color:var(--hp-line-hover);box-shadow:var(--hp-sh-hover)}
  #view :is(a.card:not(.banner),a.stat,.hp-svc:not(:has(.dd,.row-dd))):hover{translate:0 -3px;border-color:var(--hp-accent-line);box-shadow:var(--hp-sh-lift)}
  #view :is(a.stat:hover .s-ico,.hp-svc:hover .hp-ico,a.card:hover .hp-ico){scale:1.08;rotate:-6deg}
  #view a.card:hover .btn svg:last-child{translate:3px 0}
  .btn-primary:hover:not(:disabled,.disabled,[aria-disabled="true"]){translate:0 -1px;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--hp-accent) 75%,transparent)}
  .btn-primary:hover:not(:disabled,.disabled,[aria-disabled="true"])::after{background-position:-30% 0;transition:background-position .8s var(--hp-ease-out)}
  .btn:hover:not(:disabled,.disabled) svg{scale:1.12}
  .icon-btn:hover svg,.icon-x:hover svg{scale:1.1}
  .tabs a:not(.active):hover::after{scale:1 1}
  .dd-menu>a:hover svg,.dd-menu>button:hover:not(:disabled) svg{translate:2px 0}
  .back-link:hover svg{translate:-3px 0}
}

/* print: the page as it is at rest (an entrance still running, a ping or a glow mid-cycle never reaches the paper) */
@media print{#view.content,#view.content *,#view.content ::before,#view.content ::after{animation:none!important;transition:none!important}}