/* the theme's two web fonts, Latin only, served with the theme (fonts/README.md). Text shows in a fallback first. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/jetbrainsmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* anyhk theme: the demo's look (demo/styles.css), scoped under body.ah so WHMCS's Bootstrap stays usable
   for its own scripts, modals and the pages not redrawn yet. WHMCS-specific additions are at the end. */
/* Layout: a full-bleed isometric 3D campus; each WHMCS page floats above it as glass panels.
   Single light look by design (dark mode is P2 in the PRD). */
:root {
  --ground: #DCE4EF;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #FFFFFF;
  --sunk: #F2F5FA;
  --line: #DFE6F1;
  --ink: #16213A;
  --ink-2: #4A5874;
  --ink-3: #626E84; /* WCAG AA (≥ 4.5:1) on the panel, sunk and brand-soft backgrounds */
  --brand: #2F5BEA;
  --brand-deep: #1E3FB8;
  --brand-soft: #EAF0FF;
  --ok: #117E45;   --ok-soft: #E2F5EA;
  --warn: #9D5F04; --warn-soft: #FDF0D9;
  --bad: #C63139;  --bad-soft: #FCE6E7;
  --mute: #616D84; --mute-soft: #EDF0F5;
  /* Chinese in the visitor's system font (no download); Latin headings and figures in the theme's own fonts (fonts/) */
  --font-cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC";
  --font-display: "Manrope", var(--font-cjk), system-ui, sans-serif;
  --font-body: "Segoe UI", var(--font-cjk), system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(30, 52, 100, .13), 0 2px 6px rgba(30, 52, 100, .06);
  --top: calc(env(safe-area-inset-top, 0px) + 76px);
  --bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
  color-scheme: light;
}
.ah * { box-sizing: border-box; }
.ah [hidden] { display: none !important; }
html, body.ah { height: 100%; }
body.ah {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:where(.ah) button:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) select:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) textarea:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { font: inherit; color: inherit; }
:where(.ah) a:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { color: var(--brand-deep); text-decoration: none; }
:where(.ah) a:where(:hover):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { text-decoration: underline; }
:where(.ah :focus-visible:not(.ah-module *, .ant-modal-root *, [class*="ant-"])) { outline: 2px solid var(--brand); outline-offset: 2px; }
:where(.ah) h1, :where(.ah) h2, :where(.ah) h3 { font-family: var(--font-display); margin: 0; letter-spacing: -.015em; text-wrap: balance; }
:where(.ah) h1 { font-size: 22px; font-weight: 800; line-height: 1.25; }
:where(.ah) h2 { font-size: 15px; font-weight: 700; }
:where(.ah) h3 { font-size: 13px; font-weight: 700; color: var(--ink-2); }
:where(.ah) p { margin: 0; }
.ah .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ah .muted { color: var(--ink-3); }
.ah .small { font-size: 12px; }

#anyhk-world { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; display: block; touch-action: none; } /* lvh: a phone's address bar does not resize the globe */
.ah .still, #anyhk-still {
  position: fixed; inset: 0;
  background: radial-gradient(60% 50% at 70% 40%, #C9D7F5 0%, transparent 70%), linear-gradient(160deg, #EEF2F8 0%, var(--ground) 100%);
}

/* ---------- top bar ---------- */
.ah .topbar {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px;
  background: var(--panel); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px; box-shadow: var(--shadow);
}
.ah .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); flex: none; }
.ah .brand:hover { text-decoration: none; }
.ah .brand svg { width: 26px; height: 26px; }
.ah .nav { display: flex; gap: 2px; margin-left: 6px; min-width: 0; }
.ah .nav a, .ah .nav button, .ah .menu-btn {
  border: 0; background: transparent; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  color: var(--ink-2); font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; text-decoration: none;
}
.ah .nav a:hover, .ah .nav button:hover, .ah .menu-btn:hover { background: rgba(47, 91, 234, .07); color: var(--ink); text-decoration: none; }
.ah .nav [aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.ah .caret { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.ah .dd { position: relative; }
.ah .dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; padding: 6px; z-index: 30;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.ah .dd-menu.end { left: auto; right: 0; }
.ah .dd-menu a { padding: 8px 10px; border-radius: 8px; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.ah .dd-menu a:hover { background: var(--sunk); text-decoration: none; }
.ah .dd-menu hr { border: 0; height: 1px; background: var(--line); margin: 4px 2px; }
.ah .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 600 11px/18px var(--font-mono); text-align: center; }
.ah .badge.warn { background: var(--warn); }
.ah .top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.ah .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6F8FF5, var(--brand-deep)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ah .user-btn { border: 0; background: transparent; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 10px; cursor: pointer; color: var(--ink-2); }
.ah .user-btn:hover { background: rgba(47, 91, 234, .07); }
.ah .menu-btn { display: none; }
.ah .sheet {
  position: fixed; z-index: 25; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 70px);
  max-height: calc(100% - 100px); overflow-y: auto; padding: 10px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
}
.ah .sheet h3 { grid-column: 1 / -1; padding: 8px 8px 2px; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.ah .sheet a { padding: 9px 10px; border-radius: 9px; color: var(--ink); background: var(--sunk); }

/* ---------- panels ---------- */
.ah .panel {
  position: fixed; z-index: 10;
  top: var(--top);
  max-height: calc(100% - var(--top) - var(--bottom));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 20px;
  background: var(--panel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 16px;
  animation: rise .45s cubic-bezier(.2, .8, .2, 1);
}
.ah .panel > * { flex-shrink: 0; }
.ah .panel.side { left: 16px; width: min(400px, calc(100% - 32px)); }
.ah .panel.side-right { right: 16px; width: min(400px, calc(100% - 32px)); }
.ah .panel.wide { left: 16px; width: min(900px, 64vw); }
.ah .panel.center { left: 50%; width: min(440px, calc(100% - 32px)); transform: translateX(-50%); top: auto; bottom: var(--bottom); animation-name: rise-c; }
.ah .panel.legend { left: 16px; top: auto; bottom: var(--bottom); width: 290px; padding: 14px 16px; gap: 8px; }
@keyframes rise { from { transform: translateY(10px); opacity: .55; } }
@keyframes rise-c { from { transform: translate(-50%, 10px); opacity: .55; } }

.ah .eyebrow { font: 600 11px/1.3 var(--font-mono); letter-spacing: .03em; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah .eyebrow .tag { margin-left: auto; padding: 3px 7px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-family: var(--font-body); letter-spacing: 0; font-size: 11px; }
.ah .head { display: flex; flex-direction: column; gap: 6px; }
.ah .head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ah .lead { color: var(--ink-2); font-size: 13px; max-width: 62ch; }
.ah .crumbs { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; flex-wrap: wrap; }
.ah .crumbs a { color: var(--ink-2); }
.ah .section { display: flex; flex-direction: column; gap: 10px; }
.ah .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ah .section-head a { font-size: 12px; }
.ah .hr { height: 1px; background: var(--line); }
.ah .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ah .cols > * { min-width: 0; }
.ah .hint { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.ah .hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }

/* cards & lists */
.ah .card { padding: 14px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ah .list { display: flex; flex-direction: column; gap: 6px; }
.ah .row-link {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--line); color: inherit; transition: border-color .15s, transform .15s;
}
.ah .row-link:hover, .ah .row-link:focus-visible { border-color: #B9C9F7; transform: translateX(2px); text-decoration: none; }
.ah .row-link .t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ah .row-link .m { font-size: 12px; color: var(--ink-3); }
.ah .row-link .r { text-align: right; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }

.ah .pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; justify-self: end; width: max-content; }
.ah .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ah .pill.ok { background: var(--ok-soft); color: var(--ok); }
.ah .pill.warn { background: var(--warn-soft); color: var(--warn); }
.ah .pill.bad { background: var(--bad-soft); color: var(--bad); }
.ah .pill.brand { background: var(--brand-soft); color: var(--brand-deep); }
.ah .pill.brand::before { animation: blink 1s infinite; }
.ah .pill.mute { background: var(--mute-soft); color: var(--mute); }
@keyframes blink { 50% { opacity: .2; } }

.ah .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ah .tiles.three { grid-template-columns: repeat(3, 1fr); }
.ah .tile { padding: 12px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); color: inherit; display: flex; flex-direction: column; gap: 2px; }
:where(.ah) a.tile:hover { border-color: #B9C9F7; text-decoration: none; }
.ah .tile b { font: 700 22px var(--font-mono); font-variant-numeric: tabular-nums; }
.ah .tile span { font-size: 12px; color: var(--ink-2); }
.ah .tile.warn b { color: var(--warn); }
.ah .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ah .fact { padding: 10px; border-radius: 10px; background: rgba(47, 91, 234, .06); }
.ah .fact b { display: block; font: 700 15px var(--font-mono); color: var(--brand-deep); }
.ah .fact span { font-size: 11px; color: var(--ink-2); }

.ah .alert { padding: 12px 14px; border-radius: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }
.ah .alert.warn { background: var(--warn-soft); color: #6B4304; }
.ah .alert.bad { background: var(--bad-soft); color: #7A1C21; }
.ah .alert.info { background: var(--brand-soft); color: var(--brand-deep); }
.ah .alert.ok { background: var(--ok-soft); color: #0B5A30; }

/* tables */
.ah .table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); }
:where(.ah) table:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { border-collapse: collapse; width: 100%; font-size: 13px; }
:where(.ah) th:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--sunk); }
:where(.ah) td:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
:where(.ah tr:last-child) td:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { border-bottom: 0; }
:where(.ah) table.nowrap td { white-space: nowrap; }
:where(.ah) td.num, :where(.ah) th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.ah tbody) tr:where([data-href]) { cursor: pointer; }
:where(.ah tbody tr[data-href]:hover) td:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { background: #F6F8FD; }
:where(.ah) td .pill { justify-self: start; }

/* tabs */
.ah .tabs { display: flex; gap: 4px; padding: 4px; background: #EEF2F8; border-radius: 11px; overflow-x: auto; scrollbar-width: none; }
.ah .tabs::-webkit-scrollbar { display: none; }
.ah .tabs a, .ah .tabs button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ah .tabs a:hover { text-decoration: none; color: var(--ink); }
.ah .tabs [aria-current="page"], .ah .tabs [aria-selected="true"] { background: var(--panel-solid); color: var(--brand-deep); box-shadow: 0 1px 3px rgba(30,52,100,.15); }

/* forms */
.ah .form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ah .form .full { grid-column: 1 / -1; }
.ah .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ah .field label, .ah .label { font-weight: 600; font-size: 13px; }
/* .label is also Bootstrap 3's white, centred badge (twenty-one's CSS): ours is a plain field caption */
.ah .label { display: block; color: var(--ink); background: none; padding: 0; text-align: left; line-height: inherit; white-space: normal; border-radius: 0; }
.ah .field .help { font-size: 12px; color: var(--ink-3); }
.ah .field .err { font-size: 12px; color: var(--bad); min-height: 0; }
:where(.ah) select:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="text"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="email"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="password"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="tel"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="number"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) input:where([type="search"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) textarea:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) {
  height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-solid); padding: 0 11px; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
:where(.ah) textarea:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { height: auto; min-height: 120px; padding: 10px 11px; resize: vertical; line-height: 1.6; }
:where(.ah) input:where(:focus):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) select:where(:focus):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])), :where(.ah) textarea:where(:focus):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 91, 234, .15); }
:where(.ah) input:where([aria-invalid="true"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { border-color: var(--bad); }
:where(.ah) input:where([type="file"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { font-size: 13px; }
.ah .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.ah .check input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.ah .inline { display: flex; gap: 8px; }
.ah .inline > input, .ah .inline > select { flex: 1; }
.ah .promo-applied { align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; border-radius: 10px; border: 1px solid #BFE3CD; background: #EFF9F3; }
.ah .promo-applied .msg { flex: 1; min-width: 0; margin: 0; line-height: 1.45; }
.ah .promo-applied .btn { flex: none; }
#productConfigurableOptions { display: flex; flex-direction: column; gap: 16px; }
.ah .msg { font-size: 12px; }
.ah .msg.ok { color: var(--ok); } .ah .msg.bad { color: var(--bad); }
.ah .strength { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ah .strength i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.ah .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: #EEF2F8; border-radius: 11px; }
.ah .seg.three { grid-template-columns: repeat(3, 1fr); }
.ah .seg.two { grid-template-columns: repeat(2, 1fr); }
.ah .seg.six { grid-template-columns: repeat(3, 1fr); }
.ah .seg button { border: 0; background: transparent; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.ah .seg button[aria-pressed="true"] { background: var(--panel-solid); color: var(--brand-deep); box-shadow: 0 1px 3px rgba(30,52,100,.15); }
.ah .slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.ah .slider label { font-weight: 600; font-size: 13px; }
.ah .slider output { font: 600 13px var(--font-mono); color: var(--brand-deep); }
.ah .slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--brand); margin: 0; }
.ah .choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ah .choice label { border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; text-align: center; cursor: pointer; background: var(--panel-solid); font-size: 13px; font-weight: 600; position: relative; }
.ah .choice input { position: absolute; opacity: 0; pointer-events: none; }
.ah .choice label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.ah .choice label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* buttons */
.ah .btn {
  height: 42px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; padding: 0 18px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(47, 91, 234, .28); transition: background .15s, transform .1s; text-decoration: none;
}
.ah .btn:hover { background: var(--brand-deep); text-decoration: none; }
.ah .btn:active { transform: translateY(1px); }
.ah .btn:disabled { background: #A9B6D6; box-shadow: none; cursor: not-allowed; }
.ah .btn.block { width: 100%; height: 46px; font-size: 15px; }
.ah .btn.ghost { background: var(--panel-solid); color: var(--brand-deep); border: 1px solid #C9D6FA; box-shadow: none; }
.ah .btn.ghost:hover { background: var(--brand-soft); }
.ah .btn.danger { background: var(--panel-solid); color: var(--bad); border: 1px solid #F1C2C5; box-shadow: none; }
.ah .btn.danger:hover { background: var(--bad-soft); }
.ah .btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.ah .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* store */
.ah .regions { display: flex; flex-direction: column; gap: 6px; }
.ah .region {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid);
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .15s; color: inherit;
}
.ah .region:hover, .ah .region.hot { border-color: #B9C9F7; background: var(--brand-soft); transform: translateX(2px); text-decoration: none; }
.ah .code { width: 44px; height: 36px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 14px var(--font-mono); }
.ah .region .name { font-weight: 600; display: block; }
.ah .region .meta { font-size: 12px; color: var(--ink-3); display: block; }
.ah .region .price { text-align: right; }
.ah .region .price b { font: 600 16px var(--font-mono); display: block; }
.ah .region .price small { font-size: 11px; color: var(--ink-3); }
.ah .stock { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--ok-soft); color: var(--ok); margin-left: 6px; font-weight: 500; }
.ah .stock.low { background: var(--warn-soft); color: var(--warn); }
.ah .presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ah .preset { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; position: relative; }
.ah .preset:hover { border-color: #B9C9F7; }
.ah .preset b { font-size: 13px; }
.ah .preset .spec { font: 600 12px var(--font-mono); color: var(--brand-deep); }
.ah .preset .note { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.ah .preset .hot { position: absolute; top: -7px; right: 8px; font-size: 10px; padding: 1px 6px; border-radius: 5px; background: var(--brand); color: #fff; }
.ah .summary { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); }
.ah .summary .line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.ah .summary .line span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ah .summary .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); gap: 8px; }
.ah .summary .total b { font: 700 24px var(--font-mono); color: var(--ink); }
.ah .summary .total small { color: var(--ink-3); font-size: 12px; }
.ah .legend-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.ah .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.ah .item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); }
.ah .item .t { font-weight: 700; }
.ah .item .s { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }
.ah .item.has-x { position: relative; padding-right: 44px; }
.ah .addon-item .field { grid-column: 1 / -1; margin-top: 4px; }
.ah .addon-item .p small { font: 500 11px var(--font-body); color: var(--ink-3); }
.ah .item-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.ah .item-x:hover { color: var(--bad); background: rgba(198, 49, 57, .08); }
.ah .item-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ah .item .extras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.ah .item .extras small { flex-basis: 100%; font-size: 11px; color: var(--ink-3); }
.ah .item .extras span { padding: 3px 9px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ah .item .extras b { font: 600 12px var(--font-mono); color: var(--brand-deep); }
.ah .item .p { font: 600 14px var(--font-mono); }
.ah .note { font-size: 12px; color: var(--ink-3); padding: 8px 10px; border-radius: 9px; background: var(--sunk); }
.ah .empty { text-align: center; padding: 22px 8px; color: var(--ink-2); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ah .progress { height: 6px; border-radius: 3px; background: #E6ECF6; overflow: hidden; }
.ah .progress i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .2s linear; }
.ah .done-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; flex: none; }

/* store: region chips and product cards */
.ah .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ah .chip-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-solid); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: left;
}
.ah .chip-btn b { font: 700 11px var(--font-mono); color: var(--brand-deep); background: var(--brand-soft); padding: 2px 5px; border-radius: 5px; }
.ah .chip-btn span { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ink-3); }
.ah .chip-btn:hover { border-color: #B9C9F7; }
.ah .chip-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.ah .products { display: flex; flex-direction: column; gap: 8px; }
.ah .product { position: relative; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); display: flex; flex-direction: column; gap: 8px; }
.ah .product .hot { position: absolute; top: -8px; right: 12px; font-size: 10px; padding: 1px 7px; border-radius: 5px; background: var(--brand); color: #fff; }
.ah .product-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ah .product-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.ah .product-head b { font-size: 15px; }
.ah .product .price { text-align: right; }
.ah .product .price b { font: 700 18px var(--font-mono); display: block; }
.ah .product .price small { font-size: 11px; color: var(--ink-3); }
.ah .product ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.ah .product-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah .product-foot .stock { margin-left: 0; }
.ah .product-foot .btn { margin-left: auto; }

/* store: type → region → node → plan */
.ah .panel.side.store { width: min(460px, calc(100% - 32px)); }
.ah .step { display: flex; flex-direction: column; gap: 8px; }
.ah .step h3 { display: flex; align-items: center; gap: 8px; }
.ah .step h3 span { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 11px var(--font-mono); }
.ah .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ah .chips.four { display: grid; grid-template-columns: repeat(4, 1fr); }
.ah .chip-btn:disabled { opacity: .4; cursor: not-allowed; }
.ah .chip-btn { justify-content: center; }
.ah .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ah .tag-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.ah .node-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(47, 91, 234, .05); }
.ah .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ah .plan { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ah .plan.soldout { opacity: .62; }
.ah .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ah .plan-head b { font: 700 14px var(--font-mono); }
.ah .plan-head .stock { margin-left: 0; }
.ah .plan dl { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ah .plan dl > div { display: flex; justify-content: space-between; gap: 8px; }
.ah .plan dt { color: var(--ink-3); flex: none; }
.ah .plan dd { margin: 0; text-align: right; font-weight: 500; display: flex; flex-direction: column; align-items: flex-end; }
.ah .plan dd small { font-size: 10px; color: var(--ink-3); font-weight: 400; }
.ah .plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.ah .plan .price b { font: 700 17px var(--font-mono); }
.ah .plan .price small { font-size: 11px; color: var(--ink-3); }
.ah .plan-pick { display: flex; flex-direction: column; gap: 6px; }
.ah .plan-pick label { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid); cursor: pointer; font-size: 13px; }
.ah .plan-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ah .plan-pick label.soldout { opacity: .5; cursor: not-allowed; }
.ah .plan-pick input { accent-color: var(--brand); margin: 0; }
.ah .plan-pick .price { font-weight: 700; justify-self: end; }
.ah .plan-pick .mono:not(.price) { color: var(--ink-2); font-size: 12px; }
.ah .os-pick { display: flex; flex-direction: column; gap: 6px; }
.ah .os-fam { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
.ah .os-fam b { font-size: 13px; }
.ah .os-fam > div { display: flex; gap: 6px; flex-wrap: wrap; }
.ah .os-fam label { position: relative; }
.ah .os-fam input { position: absolute; opacity: 0; pointer-events: none; }
.ah .os-fam span { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-solid); font: 600 12px var(--font-mono); cursor: pointer; }
.ah .os-fam input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.ah .os-fam input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.ah .opts { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); }
.ah .opts .slider output { font-size: 12px; }
.ah .opt-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ah .opt-toggle input { margin-top: 3px; accent-color: var(--brand); }
.ah .opt-toggle span { display: flex; flex-direction: column; }
.ah .opt-toggle b { font-size: 13px; }
.ah .opt-toggle small { font-size: 12px; color: var(--ink-3); }
.ah .link-btn { border: 0; background: none; color: var(--brand-deep); font-size: 12px; cursor: pointer; padding: 0; }
.ah .link-btn:hover { text-decoration: underline; }

/* house tier card */
.ah .house-card { background: linear-gradient(135deg, #FFF8EA 0%, var(--panel-solid) 60%); border-color: #F3DFB6; }
.ah .house-card .bar i { background: linear-gradient(90deg, #F0A020, #E07B12); }
.ah .tier-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ah .tier-row .btn[aria-pressed="true"] { background: #FDF0D9; border-color: #F0A020; color: #8A5300; }

/* service detail */
.ah .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ah .kv div { background: var(--panel-solid); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ah .kv span { font-size: 11px; color: var(--ink-3); }
.ah .kv .span2 { grid-column: span 2; }
.ah .kv .span3 { grid-column: span 3; }
.ah .kv b { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.ah .card.power { flex-direction: row; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ah .power-state { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-right: auto; }
.ah .power-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.ah .power-dot.off { background: var(--mute); box-shadow: 0 0 0 4px var(--mute-soft); }
.ah .power-dot.busy { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); animation: blink .8s infinite; }
.ah .chart { position: relative; }
.ah .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ah .chart .grid line { stroke: #E7ECF4; stroke-width: 1; }
.ah .chart .axis text { fill: var(--ink-3); font: 500 10px var(--font-mono); }
.ah .chart .area { fill: rgba(47, 91, 234, .12); }
.ah .chart .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ah .chart .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ah .chart .dot { fill: var(--brand); stroke: var(--panel-solid); stroke-width: 2; }
.ah .chart .tt { position: absolute; top: 0; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; transform: translate(-50%, -110%); white-space: nowrap; }
.ah .meter { display: flex; flex-direction: column; gap: 6px; }
.ah .meter .bar { height: 8px; border-radius: 4px; background: #E6ECF6; overflow: hidden; }
.ah .meter .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.ah .meter .lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }

/* invoice */
.ah .doc { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.ah .doc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ah .doc-head .stamp { font: 800 20px var(--font-display); padding: 6px 14px; border-radius: 10px; border: 2px solid currentColor; transform: rotate(-4deg); height: max-content; }
.ah .stamp.warn { color: var(--warn); } .ah .stamp.ok { color: var(--ok); } .ah .stamp.mute { color: var(--mute); }
.ah .addr { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.ah .addr b { color: var(--ink); }

/* tickets */
.ah .thread { display: flex; flex-direction: column; gap: 10px; }
.ah .msgc { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); display: flex; flex-direction: column; gap: 6px; }
.ah .msgc.staff { background: #F4F7FF; border-color: #D6E0FB; }
.ah .msgc .who { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.ah .msgc .who b { color: var(--ink); font-size: 13px; }
.ah .msgc .role { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--brand); color: #fff; margin-left: 6px; }
.ah .msgc p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* articles */
.ah .article { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; font-size: 14px; line-height: 1.8; }
.ah .article pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: #16213A; color: #E6ECF8; font: 500 13px/1.6 var(--font-mono); overflow-x: auto; }
.ah .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ah .cat { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); color: inherit; display: flex; flex-direction: column; gap: 4px; }
.ah .cat:hover { border-color: #B9C9F7; text-decoration: none; }
.ah .cat b { font-size: 14px; }
.ah .cat span { font-size: 12px; color: var(--ink-3); }
.ah .search { position: relative; }
.ah .search input { padding-left: 36px; height: 44px; }
.ah .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.ah .ann { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); color: inherit; display: flex; flex-direction: column; gap: 4px; }
.ah .ann:hover { border-color: #B9C9F7; text-decoration: none; }
.ah .ann time { font: 500 12px var(--font-mono); color: var(--ink-3); }
.ah .ann b { font-size: 15px; }
.ah .ann p { font-size: 13px; color: var(--ink-2); }
.ah .qr { width: 132px; height: 132px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }

/* auth */
.ah .auth-alt { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.ah .demo-login { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 13px; color: var(--brand-deep); flex-wrap: wrap; }

/* dock, toast, tooltip */
.ah .dock {
  position: fixed; z-index: 15; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.ah .dock > * { pointer-events: auto; }
.ah .chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 12px; color: var(--ink-2);
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow);
  min-width: 0;
}
.ah .chip code { font: 600 12px var(--font-mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah .chip .sep { width: 1px; height: 14px; background: var(--line); flex: none; }
.ah .dock .right { margin-left: auto; }
.ah .toggle { border: 0; cursor: pointer; flex: none; }
.ah .toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ah .toggle[aria-pressed="false"] { color: var(--ink-3); }
.ah .toggle[aria-pressed="false"] .dot { background: var(--ink-3); }
.ah .ah-toasts { position: fixed; z-index: 40; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.ah .ah-toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); max-width: min(360px, calc(100vw - 32px)); animation: rise .3s ease-out; }
.ah .ah-tooltip { position: fixed; z-index: 30; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ah .nav .opt { display: none; }
}
@media (max-width: 960px) {
  .ah .nav { display: none; }
  .ah .menu-btn { display: flex; }
  .ah .user-btn > span:not(.avatar) { display: none; }
  .ah .panel.legend { display: none; }
  .ah .panel.wide { width: calc(100% - 32px); max-width: 760px; }
  .ah .tiles { grid-template-columns: repeat(2, 1fr); }
  .ah .kv { grid-template-columns: repeat(2, 1fr); }
  .ah .kv .span3 { grid-column: span 1; }
}
@media (max-width: 700px) {
  :root { --bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .ah .topbar { padding: 6px 6px 6px 10px; gap: 6px; }
  .ah .auth-btn { display: none; }
  .ah .brand span { display: none; }
  .ah .panel, .ah .panel.side, .ah .panel.side-right, .ah .panel.wide, .ah .panel.center {
    left: 16px; right: 16px; width: auto; max-width: none; top: auto; transform: none;
    bottom: var(--bottom); max-height: calc(100% - var(--top) - 20vh); animation-name: rise; padding: 16px;
  }
  .ah .dock { display: none; }
  .ah .ah-toasts { bottom: 24px; left: 16px; right: 16px; align-items: stretch; }
  .ah .cols, .ah .form { grid-template-columns: 1fr; }
  .ah .presets { grid-template-columns: 1fr; }
  .ah .plans { grid-template-columns: 1fr; }
  .ah .chips.four { grid-template-columns: repeat(2, 1fr); }
  .ah .panel.side.store { width: auto; }
  .ah .cat-grid { grid-template-columns: 1fr; }
  .ah .facts, .ah .tiles.three { grid-template-columns: repeat(3, 1fr); }
  :where(.ah) h1 { font-size: 19px; }
  .ah .sheet { grid-template-columns: 1fr; }
  .ah .doc { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ah .panel, .ah .ah-toast { animation: none; }
  .ah .pill.brand::before, .ah .power-dot.busy { animation: none; }
}


/* =================== WHMCS integration =================== */
body.ah { background: var(--ground) !important; color: var(--ink); }
#anyhk-world { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; display: block; touch-action: none; } /* lvh: a phone's address bar does not resize the globe */
#anyhk-world[hidden] { display: none; }

/* Bootstrap defaults that the demo components do not expect */
.ah .alert { margin: 0; border: 0; position: static; }
.ah .lead { font-weight: 400; }
.ah .badge { display: inline-block; }
.ah .field label, .ah .check, .ah .slider label, .ah .choice label, .ah .plan-pick label, .ah .os-fam label, .ah .opt-toggle, .ah .label { margin-bottom: 0; }
.ah .btn { line-height: 1.2; user-select: none; }
.ah .btn:focus { box-shadow: 0 0 0 3px rgba(47, 91, 234, .25); }
:where(.ah) a.btn, :where(.ah) a.btn:hover { color: #fff; text-decoration: none; }
:where(.ah) a.btn.ghost, :where(.ah) a.btn.ghost:hover { color: var(--brand-deep); }
:where(.ah) a.btn.danger, :where(.ah) a.btn.danger:hover { color: var(--bad); }
.ah .progress { display: block; font-size: inherit; }
.ah .dd-menu .dd-sep { border: 0; height: 1px; background: var(--line); margin: 4px 2px; }
.ah .dd-menu a.is-admin { color: var(--warn); }
.ah .nav-cart .badge { margin-left: 2px; }
.ah .top-right .btn.sm { gap: 6px; }

/* footer chip in the dock: language / currency, contact, terms */
.ah .dock .chip a, .ah .dock .chip button.link { color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; }
.ah .dock .chip a:hover, .ah .dock .chip button.link:hover { color: var(--ink); text-decoration: underline; }

/* pages not redrawn yet: WHMCS's Bootstrap markup inside a wide panel */
.ah .panel.legacy { display: block; width: min(1080px, 66vw); }
.ah .panel.legacy > * + * { margin-top: 14px; }
.ah .panel.legacy .card { padding: 0; gap: 0; display: flex; border-radius: 12px; }
.ah .panel.legacy .card-body { padding: 14px; }
.ah .panel.legacy .btn { height: auto; min-height: 36px; padding: 7px 14px; font-size: 13px; box-shadow: none; }
.ah .panel.legacy .btn-default, .ah .panel.legacy .btn-secondary, .ah .panel.legacy .btn-light { background: var(--panel-solid); color: var(--brand-deep); border: 1px solid #C9D6FA; }
.ah .panel.legacy .btn-success { background: var(--ok); }
.ah .panel.legacy .btn-danger { background: var(--bad); }
.ah .panel.legacy .form-control { height: 40px; border-radius: 9px; border-color: var(--line); }
.ah .panel.legacy textarea.form-control { height: auto; }
.ah .panel.legacy .breadcrumb { background: none; padding: 0; margin: 0; font-size: 12px; }
.ah .panel.legacy .sidebar .card-header { padding: 10px 14px; background: var(--sunk); }
.ah .panel.legacy .list-group-item { padding: 8px 14px; border-color: var(--line); }
.ah .panel.legacy .table-container, .ah .panel.legacy .dataTables_wrapper { overflow-x: auto; }
/* WHMCS's section#main-body rule outranks .panel and zeroes the side padding */
.ah section#main-body.panel.legacy { padding: 20px 22px; min-height: 0; }
.ah .master-breadcrumb { background: none; }
.ah .panel.has-modal { z-index: 1050; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel-solid); animation: none; }
.ah .panel > .modal-backdrop { margin: 0; }
/* DataTables lists in addon pages (tablelist.tpl) */
.ah .panel.legacy table.table-list { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ah .panel.legacy table.table-list thead th { background: var(--sunk); border: 0; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.ah .panel.legacy table.table-list td { border-top: 1px solid var(--line); vertical-align: middle; }
.ah .panel.legacy table.table-list tbody tr:first-child td { border-top: 0; }
.ah .panel.legacy table.table-list tbody tr:hover td { background: var(--brand-soft); }
.ah .panel.legacy .dataTables_filter input { height: 36px; padding-left: 34px; border-radius: 9px; background-size: 15px; background-position: 11px center; }
.ah .panel.legacy .dataTables_info, .ah .panel.legacy .dataTables_length { font-size: 13px; color: var(--ink-3); }
.ah .panel.legacy .dataTables_length select { height: 34px; border-radius: 8px; }
.ah .panel.legacy .pagination .page-link { border-color: var(--line); color: var(--brand-deep); font-size: 12px; }
.ah .panel.legacy .pagination .active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.ah .panel.legacy .label { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.ah .panel.legacy .label-success { background: var(--ok); }
.ah .panel.legacy .label-warning { background: var(--warn); }
.ah .panel.legacy .label-info { background: var(--brand); }
.ah .panel.legacy .label-danger { background: var(--bad); }
/* Bootstrap 3 panels inside a legacy page (addon templates such as btnat's log page) are content,
   not floating windows: without this they inherit .ah .panel (position: fixed, max-height, scroll)
   and collapse into a 40px strip sized by the widest line */
.ah .panel.legacy .panel {
  position: static; z-index: auto; inset: auto; width: auto; max-width: none; max-height: none;
  overflow: visible; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; display: block; gap: 0; animation: none; transform: none;
}
.ah .panel.legacy .card-body { min-width: 0; }
.ah .panel.legacy .CodeMirror { width: 100%; max-width: 100%; border-radius: 10px; font-size: 12px; }
/* row action buttons in addon lists stay on one line, compact and outlined */
.ah .panel.legacy table.table-list td:has(> .btn) { white-space: nowrap; }
.ah .panel.legacy table.table-list td > .btn { min-height: 30px; padding: 5px 12px; margin: 2px; font-size: 12px; }
.ah .panel.legacy table.table-list td > .btn-info { background: var(--panel-solid); color: var(--brand-deep); border: 1px solid #C9D6FA; }
.ah .panel.legacy table.table-list td > .btn-info:hover { background: var(--brand-soft); }
.ah .panel.legacy table.table-list td > .btn[class*="btn-del"] { color: var(--bad); border-color: #F1C2C5; }
.ah .panel.legacy table.table-list td > .btn[class*="btn-del"]:hover { background: var(--bad-soft); }
.ah .panel.legacy .sidebar .list-group-item.active { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--line); font-weight: 600; }

@media (max-width: 960px) {
  .ah .panel.legacy { width: calc(100% - 32px); max-width: 760px; }
}
@media (max-width: 700px) {
  .ah .panel.legacy { width: auto; max-height: calc(100% - var(--top) - 150px); }
}

/* order form additions */
.ah .item .btn-row { grid-column: 1 / -1; margin-top: 4px; }
.ah .ah-inline-form { display: inline-flex; margin: 0; }
.ah .alert ul { margin: 0; padding-left: 18px; }
.ah .express-checkout { display: flex; justify-content: center; }
.ah form.is-busy { opacity: .6; pointer-events: none; }
.ah .slider input[type="range"] { height: auto; padding: 0; border: 0; box-shadow: none; background: none; }
.ah .field .form-control { height: 40px; border: 1px solid var(--line); border-radius: 9px; }
/* WHMCS toggles these from its own scripts (two-factor links, gateway errors): keep them hidden over the demo's display rules */
.ah .w-hidden { display: none !important; }
.ah .rating .star { cursor: pointer; color: #C9D2E0; }
.ah .rating .star:hover, .ah .rating .star.active { color: #F0A020; }

/* store: configure view (anyhk_Cart features in the demo's look) */
.ah .summary .line span:first-child { flex: none; white-space: nowrap; }
.ah .summary .line span:last-child { text-align: right; white-space: normal; }
.ah .stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ah .stepper-label { display: flex; flex-direction: column; min-width: 0; }
.ah .stepper-label b { font-size: 13px; }
.ah .stepper-label small { font-size: 11px; color: var(--ink-3); }
.ah .stepper-ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.ah .stepper-ctrl input { width: 84px; height: 34px; text-align: center; font-family: var(--font-mono); padding: 0 6px; -moz-appearance: textfield; }
.ah .stepper-ctrl input::-webkit-outer-spin-button, .ah .stepper-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ah .stepper-unit { font: 600 11px var(--font-mono); color: var(--ink-3); min-width: 30px; }
.ah .step-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--brand-deep); font-size: 17px; font-weight: 700; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; }
.ah .step-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.ah .step-btn:disabled { color: var(--ink-3); opacity: .45; cursor: not-allowed; }
.ah .seg.period-seg { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.ah .seg.period-seg button { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.ah .seg.period-seg small { font: 500 11px var(--font-mono); color: var(--ink-3); }
.ah .seg.period-seg button[aria-pressed="true"] small { color: var(--brand-deep); }
.ah .node-info .btn-row { margin-top: 2px; }
:where(.ah) a.btn.disabled { background: #A9B6D6; box-shadow: none; pointer-events: none; }
.ah .ah-modal { position: fixed; inset: 0; z-index: 60; background: rgba(22, 33, 58, .38); display: grid; place-items: center; padding: 16px; }
.ah .ah-modal-card { width: min(900px, 100%); height: min(640px, calc(100% - 32px)); background: var(--panel-solid); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ah .ah-modal-card iframe { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 12px; }

/* configureproduct.tpl while it fills in and submits an order started on the store page (anyhk_Cart protocol) */
.ah .ah-cover { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; background: var(--ground); }
html.hcv-cart-autosubmit .ah .ah-cover, .ah .ah-cover.active { display: grid; }
.ah .ah-cover-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 32px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); font-weight: 600; color: var(--ink-2); }
.ah .ah-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--brand-soft); border-top-color: var(--brand); animation: ah-spin .8s linear infinite; }
@keyframes ah-spin { to { transform: rotate(360deg); } }

/* service details with the HeroPVE VM panel: a wider panel, and the module's app keeps its own styles */
.ah .panel.wide.vm { width: min(1120px, 74vw); }
.ah .ah-module { min-width: 0; }
.ah .ah-module #heropve-client-root { color: initial; font-size: initial; line-height: normal; }
@media (max-width: 960px) { .ah .panel.wide.vm { width: calc(100% - 32px); max-width: none; } }

/* selects: our own chevron with room from the edge (the native arrow sat on the border) */
:where(.ah) select:where(:not([multiple]):not([size])):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A88A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px;
  padding-right: 38px; text-overflow: ellipsis;
}
:where(.ah) select:where(:disabled):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { color: var(--ink-3); background-color: var(--sunk); cursor: not-allowed; }

/* configure view: anyhk_Cart's system picker (box per system, version list inside) */
.ah .sys-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.ah .sys-box { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); overflow: hidden; transition: border-color .15s, background .15s; }
.ah .sys-box:hover { border-color: #B9C9F7; }
.ah .sys-main { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 0; background: none; cursor: pointer; text-align: left; }
.ah .sys-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ah .sys-info i { font-size: 17px; color: var(--brand); width: 18px; text-align: center; }
.ah .sys-name { font-weight: 600; color: var(--ink); }
.ah .sys-arrow { color: var(--ink-3); font-size: 12px; }
.ah .sys-version { font: 600 12px var(--font-mono); color: #fff; white-space: nowrap; }
.ah .sys-box.active { background: var(--brand); border-color: var(--brand); }
.ah .sys-box.active .sys-name, .ah .sys-box.active .sys-info i { color: #fff; }
.ah .sys-box.open { border-color: var(--brand); background: var(--brand-soft); grid-column: 1 / -1; }
.ah .sys-box.open .sys-name, .ah .sys-box.open .sys-info i { color: var(--brand-deep); }
.ah .sys-versions { display: flex; flex-direction: column; gap: 4px; padding: 0 6px 6px; max-height: 210px; overflow-y: auto; }
.ah .version-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: var(--panel-solid); cursor: pointer; text-align: left; color: var(--ink); font-weight: 500; }
.ah .version-item:hover { background: var(--sunk); }
.ah .version-item.active { background: #DCE6FF; color: var(--brand-deep); }
.ah .version-check { width: 14px; color: var(--brand); font-weight: 700; }
.ah .version-arch { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ink-3); background: var(--sunk); padding: 2px 8px; border-radius: 5px; }
@media (max-width: 700px) { .ah .sys-boxes { grid-template-columns: 1fr; } }

/* top bar: notifications bell */
.ah .bell-btn { position: relative; width: 36px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.ah .bell-btn:hover, .ah .bell-btn[aria-expanded="true"] { background: rgba(47, 91, 234, .07); color: var(--ink); }
.ah .bell-btn .badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.ah .alerts-menu { width: min(340px, calc(100vw - 32px)); padding: 6px; }
.ah .alerts-head { padding: 6px 10px 8px; font: 700 12px var(--font-display); color: var(--ink-3); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ah .dd-menu span.alert-item { display: flex; padding: 8px 10px; color: var(--ink); }
.ah .dd-menu .alert-item { justify-content: flex-start; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.ah .alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--ok); }
.ah .alert-dot.bad { background: var(--bad); } .ah .alert-dot.warn { background: var(--warn); } .ah .alert-dot.info { background: var(--brand); }
.ah .alert-empty { display: block; padding: 14px 10px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* phones: tiles reflow, money and dates keep together, tab bars scroll sideways with a fade at the edge */
:where(.ah) td.mono:not(:where(.ah-module *, [class*="ant-"])), :where(.ah) td.num:not(:where(.ah-module *, [class*="ant-"])) { white-space: nowrap; }
.ah .tile b { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ah .tiles.three { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ah .tiles:not(.three) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four KPIs: two a row down to 340px */
  .ah .tile b { font-size: 17px; }
  .ah .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ah .head-row { flex-wrap: wrap; }
  .ah .head-row > .tabs { flex: 1 1 100%; }
  .ah .kv .span2, .ah .kv .span3 { grid-column: 1 / -1; }
  .ah .doc-head .stamp { font-size: 16px; padding: 4px 10px; }
  .ah .summary .line span:first-child { white-space: normal; }
}

/* display switches: 3D, terrain, daylight, space (js/anyhk/boot.js) */
.ah .fx-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ah .toggle:disabled { opacity: .45; cursor: not-allowed; }
.ah .sheet .fx-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.ah .sheet .fx-row .chip { box-shadow: none; border: 0; background: var(--sunk); padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ah .sheet .fx-row .chip[aria-pressed="false"] { color: var(--ink-3); }
#anyhk-still canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* top bar icons: shown on phones in place of the labels */
.ah .topbar .ico { display: none; flex: none; }
@media (max-width: 700px) {
  .ah .topbar { gap: 4px; padding: 5px 5px 5px 12px; }
  .ah .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .ah .brand svg, .ah .brand img { flex: none; }
  .ah .brand span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  .ah .top-right { margin-left: 0; gap: 2px; }
  .ah .topbar .ico { display: block; }
  .ah .topbar .lbl { display: none; }
  .ah .bell-btn, .ah .top-right .nav-cart.btn, .ah .user-btn, .ah .menu-btn {
    position: relative; width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 10px; box-shadow: none;
    background: transparent; color: var(--ink-2); display: grid; place-items: center; flex: none;
  }
  .ah .user-btn .avatar { width: 28px; height: 28px; }
  .ah .bell-btn:hover, .ah .top-right .nav-cart.btn:hover, .ah .user-btn:hover, .ah .menu-btn:hover { background: rgba(47, 91, 234, .07); color: var(--ink); }
  .ah .menu-btn[aria-expanded="true"], .ah .top-right .nav-cart[aria-current="page"], .ah .bell-btn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-deep); }
  .ah .top-right .nav-cart .badge, .ah .bell-btn .badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 16px; }
}

/* WHMCS language / currency picker (footer.tpl #modalChooseLanguage): the default theme paints it dark; here it is a theme panel */
.ah .modal-localisation .modal-content { background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ah .modal-localisation .modal-body { position: relative; padding: 20px 22px 6px; }
.ah .modal-localisation .close { position: absolute; top: 12px; right: 14px; color: var(--ink-3) !important; opacity: 1; text-shadow: none; font-size: 26px; line-height: 1; }
.ah .modal-localisation .close:hover { color: var(--ink) !important; }
.ah .modal-localisation .h5 { margin: 0; padding: 4px 0 12px !important; font: 700 16px var(--font-display); color: var(--ink); }
.ah .modal-localisation .item-selector + .h5 { padding-top: 18px !important; }
.ah .modal-localisation .item-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.ah .modal-localisation .item-selector > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }
.ah .modal-localisation .item-selector .item {
  display: block; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--sunk);
  color: var(--ink); text-align: center; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah .modal-localisation .item-selector .item:hover { border-color: #B9C9F7; background: #fff; }
.ah .modal-localisation .item-selector .item.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.ah .modal-localisation .modal-footer { border-top: 0; padding: 14px 22px 20px; }
@media (max-width: 700px) { .ah .modal-localisation .item-selector { grid-template-columns: repeat(2, 1fr); } }

/* WHMCS network issues banner (includes/network-issues-notifications.tpl): under the top bar; the panels move down for it */
.ah .net-banner {
  /* 8px below the top bar (it ends at 64px; 62px on phones) and 8px above the panels: see --top below */
  position: fixed; z-index: 19; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 72px); height: 32px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; font-size: 13px; line-height: 1.4;
  box-shadow: var(--shadow); text-decoration: none;
}
.ah .net-banner:hover { text-decoration: none; filter: brightness(.98); }
.ah .net-banner.info { background: var(--brand-soft); color: var(--brand-deep); }
.ah .net-banner.bad { background: var(--warn-soft); color: var(--warn); }
.ah .net-banner svg { flex: none; }
.ah .net-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah .net-banner b { margin-left: auto; white-space: nowrap; font-weight: 600; }
body.ah:has(.net-banner) { --top: calc(env(safe-area-inset-top, 0px) + 112px); }
@media (max-width: 700px) { .ah .net-banner { top: calc(env(safe-area-inset-top, 0px) + 70px); } }

/* a heading with one action on the right (services list: renew services) */
.ah .head-split { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- top bar icons and counters ----------
   cart, alerts and the menu are icon buttons at every width (labels stay for screen readers via aria-label);
   counters: one style everywhere, a solid brand-blue dot with the number (beside a nav label or on an icon's corner) */
.ah .topbar .nav-cart .ico, .ah .topbar .menu-btn .ico { display: block; }
.ah .topbar .nav-cart .lbl, .ah .topbar .menu-btn .lbl { display: none; }
.ah .bell-btn, .ah .top-right .nav-cart.btn, .ah .menu-btn {
  position: relative; width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 10px; box-shadow: none;
  background: transparent; color: var(--ink-2); display: grid; place-items: center; flex: none;
}
.ah .menu-btn { display: none; }
@media (max-width: 960px) { .ah .menu-btn { display: grid; } }
.ah .bell-btn:hover, .ah .top-right .nav-cart.btn:hover, .ah .menu-btn:hover { background: rgba(47, 91, 234, .07); color: var(--ink); }
.ah .menu-btn[aria-expanded="true"], .ah .top-right .nav-cart[aria-current="page"], .ah .bell-btn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-deep); }
.ah .nav .badge, .ah .nav .badge.warn {
  /* a superscript dot on the label's top-right, the same dot as on the bell and the cart */
  align-self: flex-start; min-width: 16px; height: 16px; padding: 0 4px; margin: -3px 0 0 -4px; border-radius: 999px;
  background: var(--brand); color: #fff; font: 700 10px/16px var(--font-display); text-align: center; font-variant-numeric: tabular-nums;
}
.ah .bell-btn .badge, .ah .top-right .nav-cart .badge {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; border-radius: 999px;
  background: var(--brand); color: #fff; font: 700 10px/16px var(--font-display); text-align: center; font-variant-numeric: tabular-nums;
}

/* the overview's level card: the customer's pick of their home's style */
.ah .style-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #F0D9A8; }
.ah .style-pick .small { margin-right: 4px; }
.ah .style-pick .chip-btn { flex: none; padding: 6px 12px; font-size: 13px; }

/* phones: the alerts list opens as a sheet the width of the top bar, just under it (anchored to the bell it ran off
   the left edge, since the cart, avatar and menu sit to the bell's right). The bell's wrapper stops being the
   positioning parent, so the list is placed against the fixed top bar itself. */
@media (max-width: 700px) {
  .ah .topbar .dd[data-key="alerts"] { position: static; }
  .ah .dd-menu.end.alerts-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: auto; max-height: 60vh; overflow-y: auto; }
}

/* file inputs: the native "choose file" button drawn as the theme's small ghost button */
:where(.ah) input:where([type="file"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { color: var(--ink-3); }
:where(.ah) input:where([type="file"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"]))::file-selector-button {
  height: 34px; margin-right: 10px; padding: 0 14px; border: 1px solid #C9D6FA; border-radius: 10px; background: var(--panel-solid);
  color: var(--brand-deep); font: 600 13px var(--font-body); cursor: pointer; transition: background .15s;
}
:where(.ah) input:where([type="file"]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"]))::file-selector-button:hover { background: var(--brand-soft); }

/* sign in / sign up with Google and other providers (includes/linkedaccounts.tpl): the provider draws its own button
   (Google's is an iframe) inside a container WHMCS marks .btn, so the theme's button look is taken off it */
.ah .auth-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.ah .auth-or::before, .ah .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ah .social-signin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ah .social-signin-btns .btn { height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.ah .social-signin-btns .btn:hover { background: none; }

/* list pages: title on the left, search and actions on the right (services list) */
.ah .list-head { align-items: center; }
/* a list that sizes the panel to its table (no sideways scroll when there is room), never narrower than .wide */
@media (min-width: 961px) { .ah .panel.wide.fit { width: auto; min-width: min(900px, 64vw); max-width: calc(100% - 32px); } }
.ah .list-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah .list-search { width: 230px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid #C9D6FA; font-size: 13px; background: var(--panel-solid); }
.ah .list-search::placeholder { color: var(--ink-3); }
@media (max-width: 700px) { .ah .list-actions { width: 100%; } .ah .list-search { flex: 1 1 100%; width: auto; } }
.ah .summary .line.promo span:last-child { color: var(--ok); }
@media (max-width: 339px) { .ah .tiles:not(.three) { grid-template-columns: 1fr; } }
/* phones while typing in the main panel (ui.js adds .kb): pinned under the top bar and sized to the visible area above
   the keyboard, so the field stays put and in view */
@media (max-width: 700px) {
  .ah .panel.kb[data-main] { top: var(--top); bottom: auto; max-height: calc(var(--vvh, 100dvh) - var(--top) - 12px); animation: none; }
}
/* no frosted glass where it is expensive or unwanted: software rendering (html.ah-lowfx, set in head.tpl) or the
   visitor's "reduce transparency" setting. Same layout, opaque surfaces. */
html.ah-lowfx .ah .topbar, html.ah-lowfx .ah .panel, html.ah-lowfx .ah .chip {
  backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel-solid);
}
@media (prefers-reduced-transparency: reduce) {
  .ah .topbar, .ah .panel, .ah .chip { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel-solid); }
}

/* addon module pages drawn in the theme's layout (transfer_vps, btnat): dialogs, switches, quotas, code */
.ah dialog.ah-dialog {
  width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-solid); color: var(--ink); box-shadow: var(--shadow);
  overflow-y: auto; overscroll-behavior: contain;
}
.ah dialog.ah-dialog.wide { width: min(860px, calc(100% - 32px)); }
.ah dialog.ah-dialog[open] { animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.ah dialog.ah-dialog::backdrop { background: rgba(22, 33, 58, .38); }
.ah dialog.ah-dialog:not([open]) { display: none; }
/* browsers without showModal (ui.js): the same card fixed in the middle, the shadow standing in for the backdrop */
.ah dialog.ah-dialog.ah-dialog-fallback { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 80; animation: none; box-shadow: 0 0 0 100vmax rgba(22, 33, 58, .38), var(--shadow); }
.ah .ah-dialog > form, .ah .ah-dialog > .dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ah .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ah .dialog-head h2 { font-size: 16px; }
.ah .dialog-x { width: 32px; height: 32px; margin: -6px -6px -6px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.ah .dialog-x:hover { color: var(--ink); background: var(--sunk); }
.ah .dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.ah .dialog-foot .msg { margin-right: auto; align-self: center; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .ah dialog.ah-dialog[open] { animation: none; } }

/* on / off switch: <label class="switch"><input type="checkbox" role="switch"> text</label> */
.ah .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ah .switch input { -webkit-appearance: none; appearance: none; width: 40px; height: 22px; margin: 0; border-radius: 11px; background: #C9D2E0; position: relative; flex: none; cursor: pointer; transition: background .15s; }
.ah .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 33, 58, .3); transition: transform .15s; }
.ah .switch input:checked { background: var(--brand); }
.ah .switch input:checked::after { transform: translateX(18px); }
.ah .switch input:disabled { opacity: .5; cursor: not-allowed; }

/* a used / allowed meter (sites on a NAT server): the bar turns amber when full */
.ah .quota { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.ah .quota-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-2); }
.ah .quota-head b { font: 600 12px var(--font-mono); color: var(--ink); }
.ah .quota.full .progress i { background: var(--warn); }

/* row actions at the end of a table row */
.ah th.actions, .ah td.actions { text-align: right; white-space: nowrap; }
.ah td.actions .btn + .btn, .ah td.actions .btn + form, .ah td.actions form + .btn { margin-left: 6px; }
.ah td.actions > * { vertical-align: middle; }
.ah td .sub { display: block; font-size: 12px; color: var(--ink-3); }

/* logs and config files: dark, monospaced, scrolls inside the panel */
.ah .code-view { margin: 0; padding: 12px 14px; border-radius: 12px; background: #16213A; color: #E6ECF8; font: 500 12px/1.65 var(--font-mono); overflow: auto; max-height: min(60vh, 560px); white-space: pre; tab-size: 4; }
.ah .code-view:empty::before { content: attr(data-empty); color: #8C9AB8; }
:where(.ah) textarea.code-input:not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { font: 500 12px/1.6 var(--font-mono); white-space: pre; tab-size: 4; min-height: 240px; overflow: auto; }
:where(.ah) textarea.code-input:where([readonly]):not(:where(.ah-module *, .ant-modal-root *, [class*="ant-"])) { background: var(--sunk); color: var(--ink-2); }
.ah .notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.ah .notes code { font: 500 12px var(--font-mono); color: var(--ink-2); background: var(--sunk); padding: 1px 5px; border-radius: 5px; }
.ah .kv.three { grid-template-columns: repeat(3, 1fr); }
.ah .kv.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .ah .kv.three, .ah .kv.two { grid-template-columns: 1fr; } }
.ah .seg.bt-seg { max-width: 420px; }