/* ==========================================================================
   HostCrafter client theme.

   Loaded after twenty-one's all.min.css and theme.min.css, so this file is the
   last word on anything they disagree about. It overrides Bootstrap 4 rather
   than replacing it: WHMCS's markup and JavaScript depend on Bootstrap's class
   names, so the classes stay and only their appearance changes.

   Colour, roughly 60/30/10:

     60%  neutral   white surfaces on a light grey canvas
     30%  blue      deep navy sidebar; a lighter blue for links
     10%  orange    primary actions, active tabs, counts

   Flat fills, one-pixel borders, shadows only where something floats.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* 60 — neutral.

     The canvas is a real step down from white, not a hint of one. The first
     version used #f4f6f9 against #ffffff: two values three per cent apart, so
     on any screen that is not a good one the cards, the page behind them and
     the borders between them all read as one flat sheet and the layout has to
     be worked out rather than seen. Every surface here is on white; the canvas
     and the lines are what say where one ends. */
  --hc-canvas:    #e7ecf3;
  --hc-surface:   #ffffff;
  --hc-surface-2: #f2f5f9;
  --hc-surface-3: #e8edf4;
  --hc-line:      #d5dde8;
  --hc-line-2:    #b6c1d1;

  --hc-text:   #101828;
  --hc-text-2: #344054;
  --hc-muted:  #667085;
  --hc-faint:  #98a2b3;

  /* 30 — blue.

     #062e79 is the client area's navy, and the module panel inside the page is
     painted from the same anchor so the sidebar and the hosting panel's own
     navigation are one colour rather than two blues that nearly match.

     --hc-nav-2 is the ground a hovered or selected row sits on, so it has to
     be visibly lighter than the column behind it — at the old spacing against
     this deeper base the selected row disappeared into the sidebar. */
  --hc-nav:      #062e79;
  --hc-nav-2:    #0f47a6;
  --hc-nav-3:    #042157;
  --hc-nav-text: #aec4dc;
  --hc-blue:      #1570ef;
  --hc-blue-dark: #1257c0;
  --hc-blue-soft: #eff6ff;
  --hc-blue-line: #b8d4fb;

  /* 10 — orange */
  --hc-orange:      #f2691c;
  --hc-orange-dark: #d45410;
  --hc-orange-soft: #fef2ea;
  --hc-orange-line: #fbcfae;

  /* state */
  --hc-ok:   #067647; --hc-ok-soft:   #ecfdf3; --hc-ok-line:   #abefc6;
  --hc-warn: #b54708; --hc-warn-soft: #fffaeb; --hc-warn-line: #fedf89;
  --hc-bad:  #b42318; --hc-bad-soft:  #fef3f2; --hc-bad-line:  #fecdca;

  --hc-sh-1: 0 1px 2px rgba(16,24,40,.05);
  --hc-sh-2: 0 4px 14px rgba(16,24,40,.08);
  --hc-sh-3: 0 12px 32px rgba(16,24,40,.16);

  --hc-r:    6px;
  --hc-r-lg: 10px;
  --hc-nav-w: 208px;
  --hc-top-h: 64px;
  /* Vertical rhythm and the horizontal page inset are separate numbers. They
     used to be one, so every step down for a smaller screen also pulled the
     content towards the sidebar until the two touched. The inset never goes
     below .9rem, and the top bar uses the same value so the page title lines
     up with the content under it. */
  --hc-gap:   1.75rem;
  --hc-inset: 1.9rem;
  /* The structural gap at the sidebar's edge. body padding is offset by the
     sidebar width PLUS this, so nothing can be painted in it. */
  --hc-seam:  18px;
  --hc-inset-l: 1.9rem;

  /* Dashboard accents. Four hues, one per section, so a glance at the tiles
     tells you which is which before you have read a word — the way every
     product you already use colours its sections. They are used ONLY on the
     dashboard tiles and their icons: the rest of the client area stays navy
     and orange, and four brand colours would be no brand at all. */
  --hc-c-blue:   #1a73e8;  --hc-c-blue-soft:   #e8f0fe;
  --hc-c-green:  #128a5b;  --hc-c-green-soft:  #e3f5ec;
  --hc-c-amber:  #b06000;  --hc-c-amber-soft:  #fef3e2;
  --hc-c-red:    #c5221f;  --hc-c-red-soft:    #fce8e6;

  --hc-fast: 110ms ease;
  --hc-med:  180ms ease;
}

html[data-hc-theme="dark"] {
  --hc-canvas:    #0f1319;
  --hc-surface:   #171b22;
  --hc-surface-2: #1c212a;
  --hc-surface-3: #232833;
  --hc-line:      #2b313c;
  --hc-line-2:    #3b424f;

  --hc-text:   #e7eaee;
  --hc-text-2: #c3c9d2;
  --hc-muted:  #98a2b3;
  --hc-faint:  #7a8494;

  --hc-blue:      #529bff;
  --hc-blue-dark: #7ab2ff;
  --hc-blue-soft: rgba(82,155,255,.12);
  --hc-blue-line: rgba(82,155,255,.3);

  --hc-orange:      #ff8a4c;
  --hc-orange-dark: #ffa06b;
  --hc-orange-soft: rgba(255,138,76,.12);
  --hc-orange-line: rgba(255,138,76,.3);

  --hc-ok:   #47cd89; --hc-ok-soft:   rgba(71,205,137,.12); --hc-ok-line:   rgba(71,205,137,.28);
  --hc-warn: #fdb022; --hc-warn-soft: rgba(253,176,34,.12); --hc-warn-line: rgba(253,176,34,.28);
  --hc-bad:  #f97066; --hc-bad-soft:  rgba(249,112,102,.12); --hc-bad-line:  rgba(249,112,102,.28);

  /* The section hues again, lifted for a dark background. The light tints are
     near-white and would have burned as four bright chips on a dark card. */
  --hc-c-blue:  #7cb0ff; --hc-c-blue-soft:  rgba(124,176,255,.15);
  --hc-c-green: #52c79a; --hc-c-green-soft: rgba(82,199,154,.15);
  --hc-c-amber: #f0aa4a; --hc-c-amber-soft: rgba(240,170,74,.15);
  --hc-c-red:   #f58b85; --hc-c-red-soft:   rgba(245,139,133,.15);

  --hc-sh-1: 0 1px 2px rgba(0,0,0,.5);
  --hc-sh-2: 0 4px 14px rgba(0,0,0,.5);
  --hc-sh-3: 0 12px 32px rgba(0,0,0,.6);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body, body.primary-bg-color {
  background: var(--hc-canvas) !important;
  color: var(--hc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* 15px, not 14. Every size in this file is relative to it, so this one value
     sets the weight of the whole client area — and at 14 the page read as
     dense and provisional rather than as something you would pay for. */
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--hc-text); font-weight: 650; letter-spacing: -.014em; }
h1 { font-size: 1.38rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.06rem; }
h4 { font-size: .97rem; } h5 { font-size: .9rem; } h6 { font-size: .84rem; }

a { color: var(--hc-blue); transition: color var(--hc-fast); }
a:hover, a:focus { color: var(--hc-blue-dark); text-decoration: none; }
hr { border-color: var(--hc-line); }

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background: var(--hc-surface-3); color: var(--hc-text-2); padding: .1em .35em; border-radius: 3px; font-size: .86em; }
.text-muted { color: var(--hc-muted) !important; }
::selection { background: rgba(242,105,28,.18); }
:focus-visible { outline: 2px solid var(--hc-orange); outline-offset: 1px; }

* { scrollbar-width: thin; scrollbar-color: var(--hc-line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--hc-line-2); border-radius: 9px;
  border: 3px solid transparent; background-clip: content-box;
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
/* The gap between the sidebar and the page is part of the SHELL, not part of
   the page's own padding. It used to be the canvas's left padding alone, and
   any page that set its own padding — or any width where that padding stepped
   down — put the content back against the navy column. Offsetting the body by
   more than the sidebar's width makes the gap structural: there is simply no
   room at that edge for anything to be drawn in. */
body.hc-app { padding-left: calc(var(--hc-nav-w) + var(--hc-seam)); }

/* The layout row WHMCS's markup wraps every page in, with its gutters undone.

   twenty-one emits `.hc-canvas > .container > .row > .col-12.primary-content`
   around all page content. Bootstrap gives `.row` a -15px margin on each side
   and gives the column 15px of padding to cancel it — an arrangement that only
   balances while the container supplies 15px of its own padding to sit in.
   This theme sets the container's padding to 0, so nothing cancelled anything:
   the row began 15px to the LEFT of the canvas and ended 15px past the right
   edge of the window.

   Measured at 1280px: canvas 226..1280, row 211..1295. That is 15px of
   horizontal scroll on every page of the client area, and a 15px indent on the
   content that reads as a misaligned left margin. Both from one pair of
   declarations that had nothing left to balance against.

   Only the layout row is touched — matched through its parent rather than with
   :has(), so a `.row` inside page content, where the gutters still do their
   job, is left exactly as Bootstrap intends. */
.hc-canvas > .container > .row,
.hc-canvas > .wrap > .row,
.hc-canvas > .row {
  margin-left: 0;
  margin-right: 0;
}
.hc-canvas > .container > .row > [class*="col-"],
.hc-canvas > .wrap > .row > [class*="col-"],
.hc-canvas > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* The sidebar never collapses on desktop — it is where the logo lives, and a
   logo that disappears on a click is worse than a fixed column. */
.hc-side {
  position: fixed; inset: 0 auto 0 0; width: var(--hc-nav-w); z-index: 1040;
  background: var(--hc-nav); display: flex; flex-direction: column;
  transition: transform var(--hc-med);
  /* The sidebar and the top bar never move while the page scrolls, so they are
     handed to the compositor as their own layers and painted once. Without
     this the browser repaints fixed chrome against every frame of the
     scrolling content underneath it, which is what makes a sticky header feel
     like it is dragging on a cheap laptop or a phone. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Top right only. It is the one corner that faces the page, and rounding it
     alone turns the column from a screen edge into a panel the content sits
     beside. The other three meet the window and stay square.

     The radius has to be large enough to survive the white logo block sitting
     directly under it — at 10px the curve was there but read as a rendering
     artefact rather than as a shape. overflow:hidden is what makes the white
     block take the corner with it. */
  border-top-right-radius: 16px;
  overflow: hidden;
  /* A hairline down the edge and a shadow falling onto the page, so the column
     reads as a panel in front of the content rather than as the window ending.
     Both are on the right only: the other three sides meet the screen. */
  box-shadow: 1px 0 0 rgba(16,24,40,.16), 6px 0 18px -6px rgba(16,24,40,.16);
}
html[data-hc-theme="dark"] .hc-side {
  box-shadow: 1px 0 0 rgba(0,0,0,.5), 6px 0 18px -6px rgba(0,0,0,.6);
}
/* The logo block is the only white surface on the navy column, so it is the
   one that shows the corner. Its own bottom border is what separates it from
   the navigation under it. */
.hc-side-brand { border-top-right-radius: 16px; }
/* Paint containment on the scrolling list only — never on the whole sidebar or
   the top bar, both of which have menus that need to escape their box. */
.hc-side-nav { contain: layout paint; }

.hc-side-brand {
  height: var(--hc-top-h); flex-shrink: 0; background: var(--hc-surface);
  display: flex; align-items: center; gap: .5rem; padding: 0 .9rem;
  border-bottom: 1px solid var(--hc-line); overflow: hidden;
}
.hc-side-brand img { max-height: 42px; max-width: 100%; width: auto; display: block; }
.hc-side-brand .hc-mark {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  background: var(--hc-orange); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .82rem;
}
.hc-side-brand .hc-name {
  font-weight: 650; font-size: .93rem; color: var(--hc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hc-side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .75rem .55rem 1.25rem; }
.hc-side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); background-clip: content-box; }

.hc-navsec {
  color: rgba(255,255,255,.36); font-size: .66rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 1.15rem .6rem .4rem; white-space: nowrap;
}
.hc-navsec:first-child { padding-top: .2rem; }

.hc-navitem, .hc-navsub {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .6rem; margin-bottom: 1px; border-radius: var(--hc-r);
  color: var(--hc-nav-text); font-size: .92rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background var(--hc-fast), color var(--hc-fast);
}
.hc-navitem:hover, .hc-navsub:hover { background: var(--hc-nav-2); color: #fff; }
.hc-navitem .hc-ic { width: 18px; flex-shrink: 0; text-align: center; font-size: .95rem; opacity: .85; }
.hc-navitem .hc-lbl, .hc-navsub .hc-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Active: orange marker and orange icon against the navy. */
.hc-navitem.on, .hc-navsub.on {
  background: var(--hc-nav-2); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--hc-orange);
}
.hc-navitem.on .hc-ic { color: var(--hc-orange); opacity: 1; }

.hc-count {
  background: rgba(255,255,255,.12); color: #fff; font-size: .7rem; font-weight: 700;
  min-width: 20px; text-align: center; padding: .05rem .35rem; border-radius: 10px; flex-shrink: 0;
}
.hc-navitem.on .hc-count, .hc-navsub.on .hc-count { background: var(--hc-orange); }

/* Second level, e.g. WordPress under Hosting. */
.hc-navsub {
  padding-left: 2.1rem; font-size: .84rem;
  color: rgba(163,184,207,.85);
}
.hc-navsub .hc-ic { width: 16px; flex-shrink: 0; text-align: center; font-size: .9rem; margin-left: -1.45rem; }

.hc-side-foot { padding: .75rem .8rem 1rem; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.hc-side-cta {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .7rem; border-radius: var(--hc-r); background: var(--hc-orange);
  color: #fff !important; font-weight: 600; font-size: .85rem; text-decoration: none;
  transition: background var(--hc-fast);
}
.hc-side-cta:hover { background: var(--hc-orange-dark); color: #fff !important; }

/* Quick Migration. Tinted rather than filled: a second solid orange block above
   the sidebar's own CTA would leave the customer with two competing buttons. */
.hc-navitem.hc-nav-cta {
  margin-top: .45rem;
  background: rgba(242,105,28,.13);
  color: #ffd9c1;
}
.hc-navitem.hc-nav-cta .hc-ic { color: var(--hc-orange); opacity: 1; }
.hc-navitem.hc-nav-cta:hover { background: rgba(242,105,28,.24); color: #fff; }

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
.hc-top {
  position: sticky; top: 0; z-index: 1030; height: var(--hc-top-h);
  display: flex; align-items: center; gap: .5rem; padding: 0 var(--hc-inset);
  background: var(--hc-surface); border-bottom: 1px solid var(--hc-line);
  /* Its own layer, for the reason given on .hc-side. No containment here: the
     account menu and the notifications popover both have to draw outside it. */
  transform: translateZ(0);
}
.hc-top-title {
  font-size: 1rem; font-weight: 650; color: var(--hc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Search sits next to it now, so the title yields first when the bar runs
     out of room rather than pushing the search box off the end. */
  min-width: 0; flex: 0 1 auto;
}
.hc-top-right { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.hc-iconbtn {
  position: relative; display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px; border: 0;
  background: transparent; color: var(--hc-muted); font-size: .95rem; cursor: pointer;
  text-decoration: none; transition: background var(--hc-fast), color var(--hc-fast);
}

/* The bell and the cart are inline SVG here, the same markup the public
   website uses, so that the two headers hold the same icon rather than two
   drawings of the same idea. 18px is site.css's .hc-ico .i. */
.hc-iconbtn .i { width: 18px; height: 18px; }
.hc-iconbtn:hover { background: var(--hc-surface-3); color: var(--hc-text); }
/* Identical to site.css's .hc-dot, down to the ring width. */
.hc-iconbtn .hc-dot {
  position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--hc-orange); color: #fff;
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--hc-surface); line-height: 1;
}
.hc-avatar-btn { font-size: .78rem; }

/* Breadcrumbs. Only on pages you arrive at FROM somewhere — the service
   detail page, which is reached from the hosting list. A breadcrumb on a
   top-level page is decoration. */
.hc-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  margin: 0 0 1rem; font-size: .84rem; color: var(--hc-muted);
}
.hc-crumbs a { color: var(--hc-muted); text-decoration: none; }
.hc-crumbs a:hover { color: var(--hc-blue); text-decoration: underline; }
.hc-crumb-sep { display: inline-flex; color: var(--hc-faint); }
.hc-crumb-sep svg { width: 13px; height: 13px; }
.hc-crumb-now { color: var(--hc-text); font-weight: 600; }
/* WHMCS hides the empty cart count with .w-hidden, a single class that loses
   to ".hc-iconbtn .hc-dot" — which left a permanent "0" on the cart. */
.hc-iconbtn .hc-dot.w-hidden { display: none; }

/* Beside the page title, at the left of the bar. flex: none so it keeps its
   width when the title is long, and a margin so the two do not read as one
   control. */
.hc-search {
  display: flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .7rem;
  margin-left: .35rem; flex: none;
  border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: var(--hc-surface-2);
  color: var(--hc-faint); font-size: .85rem; cursor: pointer; width: 220px;
  transition: border-color var(--hc-fast);
}
.hc-search:hover { border-color: var(--hc-line-2); }
.hc-search kbd {
  margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--hc-faint);
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: 3px; padding: .05rem .28rem; font-family: inherit;
}

/* Migration. Outlined in the accent rather than filled — the top bar is
   chrome, and a solid orange button there would outrank the page's own primary
   action.

   It used to be 170px wide: three inline logos (WordPress, arrow, WordPress)
   and the words "Quick Migration". Every one of those decisions was defensible
   on its own and the result was a banner in the chrome. One real WordPress
   mark and one word now, ~96px, which is a button rather than an
   advertisement. */
.hc-migrate {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .65rem;
  border-radius: 8px; border: 1px solid var(--hc-orange-line);
  background: var(--hc-orange-soft); color: var(--hc-orange-dark);
  font-size: .82rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background var(--hc-fast), border-color var(--hc-fast), color var(--hc-fast);
}
.hc-migrate:hover {
  background: var(--hc-orange); border-color: var(--hc-orange);
  color: #fff; text-decoration: none;
}
.hc-migrate .i { width: 15px; height: 15px; flex-shrink: 0; }

/* Account: a round avatar that opens everything, logout included. */
.hc-avatar-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--hc-blue); color: #fff; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center; transition: box-shadow var(--hc-fast);
}
.hc-avatar-btn:hover, .hc-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--hc-blue-soft); }
.hc-usermenu { min-width: 240px; padding: .35rem; }
.hc-usermenu .hc-um-head {
  padding: .55rem .6rem .6rem; border-bottom: 1px solid var(--hc-line); margin-bottom: .3rem;
}
.hc-usermenu .hc-um-name { font-weight: 650; font-size: .88rem; color: var(--hc-text); }
.hc-usermenu .hc-um-mail { font-size: .78rem; color: var(--hc-muted); word-break: break-all; }
.hc-usermenu .dropdown-item { display: flex; align-items: center; gap: .55rem; }
.hc-usermenu .dropdown-item i { width: 16px; text-align: center; color: var(--hc-faint); font-size: .85rem; }
.hc-usermenu .hc-um-out { color: var(--hc-bad); font-weight: 600; }
.hc-usermenu .hc-um-out i { color: var(--hc-bad); }
.hc-usermenu .hc-um-out:hover { background: var(--hc-bad-soft); color: var(--hc-bad); }

/* --------------------------------------------------------------------------
   5. Canvas
   -------------------------------------------------------------------------- */
.hc-canvas {
  min-height: calc(100vh - var(--hc-top-h));
  /* Explicit sides: a single shorthand was being clipped to nothing once the
     Bootstrap container inside it had its own padding zeroed, so the content
     sat flush against the sidebar. */
  padding: var(--hc-gap) var(--hc-inset) 2.5rem var(--hc-inset-l);
}
.hc-canvas > .container, .hc-canvas > .container-fluid { max-width: 1280px; padding: 0; }
.master-breadcrumb { display: none; }

/* --------------------------------------------------------------------------
   6. Section tabs — the strip above each page
   -------------------------------------------------------------------------- */
.hc-tabs {
  display: flex; gap: .15rem; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--hc-line); margin-bottom: 1.15rem;
}
.hc-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .9rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--hc-muted); font-size: .875rem; font-weight: 600;
  background: none; text-decoration: none; cursor: pointer;
  transition: color var(--hc-fast), border-color var(--hc-fast);
}
.hc-tab:hover { color: var(--hc-text); }
.hc-tab.on { color: var(--hc-orange); border-bottom-color: var(--hc-orange); }
.hc-tab i { font-size: .9rem; }
.hc-tab .hc-tcount {
  background: var(--hc-surface-3); color: var(--hc-muted);
  font-size: .7rem; font-weight: 700; padding: .05rem .35rem; border-radius: 9px;
}
.hc-tab.on .hc-tcount { background: var(--hc-orange-soft); color: var(--hc-orange); }

.hc-toolrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.hc-filter { position: relative; flex: 1; min-width: 190px; max-width: 320px; display: flex; align-items: center; }
.hc-filter i { position: absolute; left: .7rem; color: var(--hc-faint); font-size: .82rem; pointer-events: none; }
.hc-filter input {
  width: 100%; padding: .45rem .7rem .45rem 2rem;
  border: 1px solid var(--hc-line-2); border-radius: var(--hc-r);
  background: var(--hc-surface); color: var(--hc-text); font-size: .85rem;
}
.hc-filter input:focus { outline: 0; border-color: var(--hc-orange); box-shadow: 0 0 0 2px var(--hc-orange-soft); }

/* --------------------------------------------------------------------------
   7. Data tables — the same shape on every page
   -------------------------------------------------------------------------- */
.hc-tablewrap {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
table.hc-table { width: 100%; border-collapse: collapse; margin: 0; }
table.hc-table thead th {
  background: var(--hc-surface-2); border-bottom: 1px solid var(--hc-line);
  color: var(--hc-muted); font-size: .69rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .7rem .95rem; text-align: left; white-space: nowrap;
}
table.hc-table tbody td {
  border-top: 1px solid var(--hc-line); padding: .8rem .95rem;
  vertical-align: middle; font-size: .87rem; color: var(--hc-text-2);
}
table.hc-table tbody tr { transition: background var(--hc-fast); }
table.hc-table tbody tr:hover { background: var(--hc-surface-2); }
table.hc-table tbody tr.hc-clickable { cursor: pointer; }
table.hc-table .hc-primary {
  display: block; font-weight: 620; color: var(--hc-text); font-size: .89rem; line-height: 1.35;
}
table.hc-table .hc-secondary {
  display: block; font-size: .8rem; color: var(--hc-muted); line-height: 1.3;
}
/* …except where it trails a value on the same line, as in "$9.00 Monthly". */
table.hc-table td > .hc-secondary { display: inline; }
table.hc-table .hc-go { color: var(--hc-faint); text-align: right; white-space: nowrap; }
table.hc-table tbody tr:hover .hc-go { color: var(--hc-orange); }

/* "Control panel", beside the arrow that opens it.

   Coloured, because it is the one thing on the row that is a destination
   rather than a fact — the plan, the status and the renewal date are all
   things to read, and this is the thing to click. In the brand orange, which
   in this theme means exactly that everywhere else too.

   The label is the first thing to go when the row runs out of room: below
   this the chevron carries the meaning on its own, which it can once the
   customer has clicked one. */
.hc-go-l {
    font-size: .82rem;
    font-weight: 650;
    color: var(--hc-orange);
    margin-right: .4rem;
    white-space: nowrap;
}

/* One line, everything centred on it.

   The row is a flex container, so every child is a flex item and stretches to
   the row's height by default — which left the status pill top-aligned against
   a two-line plan block beside it and reading as though it belonged to the
   first line rather than to the row. align-self on the children is what pins
   them all to the same centre line; flex-shrink keeps the pill and the arrow
   whole when a long domain wants the space. */
.hc-prow > * { align-self: center; }
.hc-prow .label.status,
.hc-prow .status { flex-shrink: 0; align-self: center; line-height: 1.25; }
.hc-prow-go {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Same treatment in the table on the hosting page: the cell is right-aligned
   and its contents sit on the row's centre line. */
table.hc-table .hc-go > * { vertical-align: middle; }
table.hc-table td.hc-go {
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .hc-go-l { display: none; }
}
table.hc-table .hc-cell-ic {
  width: 30px; height: 30px; border-radius: var(--hc-r); display: grid; place-items: center;
  background: var(--hc-blue-soft); color: var(--hc-blue); font-size: .85rem; flex-shrink: 0;
}
table.hc-table .hc-cell-flex { display: flex; align-items: center; gap: .65rem; }

.hc-empty {
  text-align: center; padding: 2.75rem 1.25rem;
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); color: var(--hc-muted);
}
.hc-empty > i { font-size: 1.7rem; color: var(--hc-faint); margin-bottom: .65rem; display: block; }
.hc-empty h3 { font-size: .98rem; margin: 0 0 .3rem; }
.hc-empty p { font-size: .85rem; margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   7a. Domains
   -------------------------------------------------------------------------- */

/* WHMCS's bulk actions, kept working and made to look like they belong. */
.hc-bulkbar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.hc-bulklbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hc-faint); margin-right: .2rem;
}
table.hc-table th.hc-check, table.hc-table td.hc-check { width: 34px; padding-right: 0; }
table.hc-table td.hc-check input { width: 15px; height: 15px; accent-color: var(--hc-orange); cursor: pointer; }

/* No domains yet — the state every new customer is in, so it is the one worth
   designing. A search box says what to do; an empty table with headings does
   not. */
.hc-dom-empty {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); padding: 2.5rem 1.5rem; text-align: center;
}
.hc-dom-ic {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .9rem;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--hc-blue-soft); color: var(--hc-blue);
}
.hc-dom-empty h2 { font-size: 1.15rem; font-weight: 650; color: var(--hc-text); margin: 0 0 .4rem; }
.hc-dom-empty > p {
  font-size: .88rem; color: var(--hc-muted); line-height: 1.55;
  max-width: 46ch; margin: 0 auto 1.35rem;
}
.hc-dom-search {
  display: flex; gap: .5rem; max-width: 30rem; margin: 0 auto; flex-wrap: wrap;
}
.hc-dom-field { position: relative; flex: 1 1 15rem; display: flex; align-items: center; }
.hc-dom-field i { position: absolute; left: .85rem; color: var(--hc-faint); font-size: .9rem; pointer-events: none; }
.hc-dom-field input {
  width: 100%; height: 44px; padding: 0 .9rem 0 2.3rem;
  border: 1px solid var(--hc-line-2); border-radius: var(--hc-r);
  background: var(--hc-surface); color: var(--hc-text); font-size: .95rem;
}
.hc-dom-field input:focus {
  outline: 0; border-color: var(--hc-orange); box-shadow: 0 0 0 3px var(--hc-orange-soft);
}
.hc-dom-search .btn { height: 44px; padding: 0 1.4rem; font-size: .9rem; }
.hc-dom-alt {
  font-size: .84rem; color: var(--hc-muted); line-height: 1.6;
  max-width: 48ch; margin: 1.35rem auto 0;
}

/* --------------------------------------------------------------------------
   7b. Quick Migration page
   -------------------------------------------------------------------------- */
.hc-mig-head { margin-bottom: 1.1rem; max-width: 60ch; }
.hc-mig-head h2 { font-size: 1.15rem; font-weight: 650; color: var(--hc-text); margin: 0 0 .35rem; }
.hc-mig-head p { font-size: .88rem; color: var(--hc-muted); margin: 0; line-height: 1.55; }

.hc-mig-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.1rem;
}
.hc-mig-step {
  display: flex; gap: .7rem; padding: .85rem .95rem;
  background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg);
}
.hc-mig-n {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--hc-orange-soft); color: var(--hc-orange-dark);
  font-size: .74rem; font-weight: 700; display: grid; place-items: center;
}
.hc-mig-step strong { display: block; font-size: .86rem; font-weight: 620; color: var(--hc-text); }
.hc-mig-step span { display: block; font-size: .81rem; color: var(--hc-muted); line-height: 1.45; margin-top: .15rem; }

table.hc-table .hc-mig-go { text-align: right; white-space: nowrap; }
.hc-mig-muted { font-size: .8rem; color: var(--hc-muted); }

.hc-mig-help {
  display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem;
  padding: .9rem 1rem; background: var(--hc-surface-2);
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg);
}
.hc-mig-help > i { color: var(--hc-blue); font-size: 1.05rem; flex-shrink: 0; }
.hc-mig-help strong { display: block; font-size: .87rem; font-weight: 620; color: var(--hc-text); }
.hc-mig-help span { display: block; font-size: .82rem; color: var(--hc-muted); line-height: 1.45; }
.hc-mig-help .btn { margin-left: auto; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--hc-r); font-weight: 600; font-size: .84rem;
  padding: .44rem .85rem; border-width: 1px;
  transition: background-color var(--hc-fast), border-color var(--hc-fast), color var(--hc-fast);
}
.btn { text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 2px var(--hc-orange-soft); }
.btn-primary { background: var(--hc-orange); border-color: var(--hc-orange); color: #fff; }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--hc-orange-dark); border-color: var(--hc-orange-dark); color: #fff;
}
.btn-default, .btn-secondary {
  background: var(--hc-surface); border-color: var(--hc-line-2); color: var(--hc-text-2);
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--hc-surface-2); border-color: var(--hc-muted); color: var(--hc-text);
}
.btn-success { background: var(--hc-ok); border-color: var(--hc-ok); color: #fff; }
.btn-danger  { background: var(--hc-bad); border-color: var(--hc-bad); color: #fff; }
.btn-info    { background: var(--hc-blue); border-color: var(--hc-blue); color: #fff; }
.btn-warning { background: var(--hc-warn); border-color: var(--hc-warn); color: #fff; }
.btn-outline-primary { color: var(--hc-orange); border-color: var(--hc-orange); background: transparent; }
.btn-outline-primary:hover { background: var(--hc-orange); color: #fff; }
.btn-lg { padding: .58rem 1.1rem; font-size: .9rem; }
.btn-sm, .btn-xs { padding: .28rem .6rem; font-size: .79rem; }
.btn-block { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.btn.disabled, .btn:disabled { opacity: .5; }

/* --------------------------------------------------------------------------
   9. Cards, forms, alerts, badges
   -------------------------------------------------------------------------- */
.card, .panel, .well {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); box-shadow: none;
}
.card-header {
  background: var(--hc-surface); border-bottom: 1px solid var(--hc-line);
  padding: .75rem 1rem; border-radius: var(--hc-r-lg) var(--hc-r-lg) 0 0 !important;
}
.card-header h3, .card-header .card-title { font-size: .9rem; font-weight: 650; margin: 0; color: var(--hc-text); }
.card-body { padding: 1rem; }
.card-footer {
  background: var(--hc-surface-2); border-top: 1px solid var(--hc-line); padding: .7rem 1rem;
  border-radius: 0 0 var(--hc-r-lg) var(--hc-r-lg) !important;
}
.card + .card { margin-top: 1rem; }

.form-control, .custom-select, textarea.form-control {
  background: var(--hc-surface); border: 1px solid var(--hc-line-2); color: var(--hc-text);
  border-radius: var(--hc-r); padding: .44rem .65rem; font-size: .86rem; height: auto;
  transition: border-color var(--hc-fast), box-shadow var(--hc-fast);
}
.form-control:focus, .custom-select:focus {
  background: var(--hc-surface); border-color: var(--hc-orange); color: var(--hc-text);
  box-shadow: 0 0 0 2px var(--hc-orange-soft);
}
.form-control::placeholder { color: var(--hc-faint); }
.form-control:disabled, .form-control[readonly] { background: var(--hc-surface-3); }
label { font-weight: 600; font-size: .82rem; color: var(--hc-text-2); margin-bottom: .3rem; }
.input-group-text { background: var(--hc-surface-2); border-color: var(--hc-line-2); color: var(--hc-muted); border-radius: var(--hc-r); font-size: .84rem; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--hc-orange); border-color: var(--hc-orange); }

.alert { border-radius: var(--hc-r); border: 1px solid; border-left-width: 3px; padding: .7rem .9rem; font-size: .86rem; }
.alert-success { background: var(--hc-ok-soft);   border-color: var(--hc-ok-line);   color: var(--hc-ok); }
.alert-info    { background: var(--hc-blue-soft); border-color: var(--hc-blue-line); color: var(--hc-blue); }
.alert-warning { background: var(--hc-warn-soft); border-color: var(--hc-warn-line); color: var(--hc-warn); }
.alert-danger, .alert-error { background: var(--hc-bad-soft); border-color: var(--hc-bad-line); color: var(--hc-bad); }

.badge { border-radius: 3px; font-weight: 650; font-size: .68rem; padding: .25em .5em; }
.badge-info { background: var(--hc-blue); }
.badge-success { background: var(--hc-ok); }

.label.status, .status {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 20px; padding: .18rem .55rem;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: var(--hc-surface-3); color: var(--hc-muted);
}
.label.status::before, .status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
/* WHMCS emits class="label status status-active". The base rule above is
   ".label.status" — two classes — so a single-class ".status-active" loses to
   it and every pill renders grey. These carry ".label" to match. */
.label.status-active, .status-active,
.label.status-paid, .status-paid,
.label.status-completed, .status-completed,
.label.status-open, .status-open { background: var(--hc-ok-soft); color: var(--hc-ok); }

.label.status-pending, .status-pending,
.label.status-draft, .status-draft,
.label.status-customer-reply, .status-customer-reply { background: var(--hc-warn-soft); color: var(--hc-warn); }

.label.status-suspended, .status-suspended,
.label.status-overdue, .status-overdue,
.label.status-cancelled, .status-cancelled,
.label.status-terminated, .status-terminated,
.label.status-fraud, .status-fraud,
.label.status-unpaid, .status-unpaid,
.label.status-expired, .status-expired { background: var(--hc-bad-soft); color: var(--hc-bad); }

/* --------------------------------------------------------------------------
   10. WHMCS chrome — stock tables, modals, dropdowns, tabs
   -------------------------------------------------------------------------- */
.table-container, .table-responsive {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
.table { margin: 0; color: var(--hc-text-2); }
.table thead th {
  background: var(--hc-surface-2); border-bottom: 1px solid var(--hc-line) !important;
  border-top: 0 !important; color: var(--hc-muted);
  font-size: .69rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .7rem .95rem; white-space: nowrap;
}
.table tbody td { border-top: 1px solid var(--hc-line); padding: .7rem .95rem; vertical-align: middle; }
.table tbody tr:hover { background: var(--hc-surface-2); }
.table tbody tr[onclick] { cursor: pointer; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--hc-line); }

.dataTables_wrapper { padding: .75rem; }
.dataTables_filter input, .dataTables_length select {
  border: 1px solid var(--hc-line-2); border-radius: var(--hc-r); padding: .3rem .55rem;
  background: var(--hc-surface); color: var(--hc-text);
}
.dataTables_info, .dataTables_length, .dataTables_filter { color: var(--hc-muted); font-size: .82rem; }
.page-link { border-color: var(--hc-line); color: var(--hc-text-2); background: var(--hc-surface); font-size: .82rem; }
.page-item.active .page-link { background: var(--hc-orange); border-color: var(--hc-orange); color: #fff; }

.modal-backdrop.show { background: rgba(16,24,40,.5); opacity: 1; }
.modal-content { background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); box-shadow: var(--hc-sh-3); }
.modal-header { border-bottom: 1px solid var(--hc-line); padding: .9rem 1.1rem; }
.modal-title { font-size: .98rem; font-weight: 650; }
.modal-body { padding: 1.1rem; }
.modal-footer { border-top: 1px solid var(--hc-line); padding: .8rem 1.1rem; }
.modal .close { color: var(--hc-muted); text-shadow: none; opacity: .9; font-weight: 400; }

.dropdown-menu {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); box-shadow: var(--hc-sh-2); padding: .3rem; font-size: .85rem;
}
.dropdown-item { border-radius: var(--hc-r); color: var(--hc-text-2); padding: .45rem .6rem; }
.dropdown-item:hover { background: var(--hc-surface-3); color: var(--hc-text); }
.dropdown-divider { border-color: var(--hc-line); margin: .3rem 0; }

/* The order form's category list. twenty-one paints the selected item a flat
   #666, which reads as disabled rather than selected. */
.list-group-item {
  background: var(--hc-surface); border-color: var(--hc-line);
  color: var(--hc-text-2); font-size: .86rem;
}
.list-group-item-action:hover { background: var(--hc-surface-2); color: var(--hc-text); }
/* twenty-one scopes its own rule as ".sidebar .list-group-item.active" — the
   order form templates ship their own .sidebar markup, so that beats a plain
   ".list-group-item.active" and repaints it #666. Match the specificity. */
.list-group-item.active,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
  background: var(--hc-orange-soft); border-color: var(--hc-line);
  color: var(--hc-orange); font-weight: 650;
}

.nav-tabs { border-bottom: 1px solid var(--hc-line); }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--hc-muted); font-weight: 600; font-size: .875rem; padding: .6rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--hc-text); }
.nav-tabs .nav-link.active { background: transparent; color: var(--hc-orange); border-bottom-color: var(--hc-orange); }
.nav-pills .nav-link.active { background: var(--hc-orange); border-radius: var(--hc-r); }

.popover { border-color: var(--hc-line); border-radius: var(--hc-r-lg); box-shadow: var(--hc-sh-2); background: var(--hc-surface); }
.popover-header { background: var(--hc-surface-2); border-bottom-color: var(--hc-line); color: var(--hc-text); font-size: .85rem; }
.client-alerts { list-style: none; margin: 0; padding: 0; min-width: 230px; }
.client-alerts li a { display: flex; gap: .5rem; padding: .45rem .25rem; color: var(--hc-text-2); font-size: .84rem; }
.client-alerts li.none { padding: .5rem .25rem; color: var(--hc-muted); font-size: .84rem; }
.tooltip-inner { background: var(--hc-nav); border-radius: var(--hc-r); font-size: .77rem; }

/* --------------------------------------------------------------------------
   11. Dashboard stats
   -------------------------------------------------------------------------- */
/* Dashboard: the counters are the tabs.

   Each one carries its own number and switches the panel below it, so the
   figure and the list it describes are never in two different places on the
   page. Each section keeps one hue across its tile, its icon and the rule
   under it when selected, so the four are told apart before they are read. */
.hc-dtabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.1rem;
}
.hc-dtab {
  --tint: var(--hc-c-blue); --tint-soft: var(--hc-c-blue-soft);
  display: flex; align-items: center; gap: .7rem; text-align: left;
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-bottom: 3px solid var(--hc-line);
  border-radius: var(--hc-r-lg); padding: .8rem .9rem; cursor: pointer;
  transition: border-color var(--hc-fast), box-shadow var(--hc-fast), transform var(--hc-fast);
}
.hc-dtab { text-decoration: none; }
.hc-dtab:hover {
  border-color: var(--hc-line-2); border-bottom-color: var(--tint);
  transform: translateY(-1px); box-shadow: var(--hc-sh-1); text-decoration: none;
}
/* The active hint. Hosting carries it on the dashboard because the list under
   the tiles is the hosting one — the strip reads as a tab bar whose open tab's
   content is directly below it. */
.hc-dtab.on {
  border-color: var(--hc-line-2); border-bottom-color: var(--tint);
  background: var(--hc-surface); box-shadow: var(--hc-sh-1);
}
.hc-dtab.on::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tint);
}
.hc-dtab { position: relative; }
.hc-dtab-c2 { --tint: var(--hc-c-green); --tint-soft: var(--hc-c-green-soft); }
.hc-dtab-c3 { --tint: var(--hc-c-amber); --tint-soft: var(--hc-c-amber-soft); }
.hc-dtab-c4 { --tint: var(--hc-c-red);   --tint-soft: var(--hc-c-red-soft); }
.hc-dtab-ic {
  width: 38px; height: 38px; border-radius: var(--hc-r); flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.02rem;
  background: var(--tint-soft); color: var(--tint);
}
.hc-dtab-t { min-width: 0; }
.hc-dtab-n { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.05; color: var(--hc-text); letter-spacing: -.02em; }
/* The label is the word you actually scan for — Hosting, Domains — so it is
   set at the weight of a heading rather than as a caption under a number. */
.hc-dtab-l {
  display: block; font-size: .92rem; font-weight: 650; color: var(--hc-text-2);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-dtab.on .hc-dtab-l { color: var(--hc-text); }

/* --------------------------------------------------------------------------
   Dashboard grids: what is owed, and what is waiting

   Two columns on a desktop, stacked on anything narrower. Each is a card with
   a heading, a list and a footer link — the same shape, so the eye learns it
   once and reads both.
   -------------------------------------------------------------------------- */
.hc-grids {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start;
  /* A real break from the hosting list above, several times the .9rem that
     separates the two columns from each other. This is the seam between "your
     sites" and "things waiting on you"; at a card's width of space it read as
     one continuous stack of boxes. */
  margin-top: 3rem;
}
/* The same card, full width, for the sections that are not in the two-up. */
.hc-grid-w { display: block; }

/* A section title on the canvas rather than a header bar inside a card. It is
   set large enough to be the thing you read first on the page. */
.hc-sect {
  font-size: 1.22rem; font-weight: 680; letter-spacing: -.02em; color: var(--hc-text);
  margin: 1.6rem 0 .7rem;
}

/* The list under it: one card, rows, nothing else. No icon column — the domain
   is what is being scanned and it should start at the edge. */
.hc-plain {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
.hc-prow {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.1rem; border-top: 1px solid var(--hc-line);
  color: var(--hc-text-2); text-decoration: none; transition: background var(--hc-fast);
}
.hc-prow:first-child { border-top: 0; }
.hc-prow:hover { background: var(--hc-surface-2); text-decoration: none; }
.hc-prow-m { flex: 1; min-width: 0; }
.hc-prow-t {
  display: block; font-size: 1.02rem; font-weight: 650; color: var(--hc-text);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-prow-s { display: block; font-size: .86rem; color: var(--hc-muted); line-height: 1.35; }
.hc-prow-go { color: var(--hc-faint); font-size: .82rem; flex-shrink: 0; }
.hc-prow:hover .hc-prow-go { color: var(--hc-orange); }

/* Rows become separate cards once there is more than one kind of hosting in
   the list: a WooCommerce store and a WordPress site are different things, and
   a single hairline between them read as one continuous block. */
.hc-plain-gap {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: grid;
  gap: .55rem;
}
.hc-plain-gap .hc-prow {
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-surface);
  transition: border-color var(--hc-fast), box-shadow var(--hc-fast), transform var(--hc-fast);
}
/* The card is the affordance.

   With no words in its right-hand corner, what tells the customer this row
   opens something is the way it behaves: the border takes the brand colour and
   the card lifts a little. That is enough, and it is the same gesture the
   panel's own website rows make — so a product card here and a website row
   inside feel like one product. */
.hc-plain-gap .hc-prow:hover {
  border-color: var(--hc-orange);
  box-shadow: 0 3px 14px rgba(23, 27, 52, .09);
  transform: translateY(-1px);
  background: var(--hc-surface);
}
@media (prefers-reduced-motion: reduce) {
  .hc-plain-gap .hc-prow:hover { transform: none; }
}

/* The category word, and nothing else on the row, carries colour. Three fixed
   hues rather than the theme accent: the point is to tell them apart down a
   column, which one accent colour cannot do. */
.hc-cat { font-weight: 650; }
.hc-cat-wordpress { color: var(--hc-c-blue, #1570ef); }
.hc-cat-woocommerce { color: var(--hc-orange, #f2691c); }
.hc-cat-agency { color: #7a5af8; }
.hc-grid {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
/* Money owed is the only thing on this page with a coloured edge. */
.hc-grid.due { border-top: 3px solid var(--hc-c-red); }
.hc-grid-h {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--hc-line);
  background: var(--hc-surface-2);
}
.hc-grid-t { font-size: .95rem; font-weight: 650; color: var(--hc-text); }
.hc-grid-t i { color: var(--hc-muted); margin-right: .35rem; }
.hc-grid-sum {
  margin-left: auto; font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--hc-c-red);
}
.hc-grid-act {
  margin-left: auto; font-size: .84rem; font-weight: 600; color: var(--hc-blue);
  white-space: nowrap;
}
.hc-grid-b { padding: 0; }
.hc-grid-f {
  display: block; padding: .65rem 1rem; border-top: 1px solid var(--hc-line);
  background: var(--hc-surface-2); font-size: .86rem; font-weight: 600; color: var(--hc-blue);
}
.hc-grid-f i { font-size: .7rem; margin-left: .2rem; }
.hc-grid-none {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: 1.15rem 1rem; font-size: .89rem; color: var(--hc-muted); line-height: 1.5;
}
.hc-grid-none i { color: var(--hc-ok); margin-top: .15rem; }

/* An invoice row. Amount and Pay sit together on the right so the decision and
   the action are in the same place. */
.hc-inv {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem; border-top: 1px solid var(--hc-line);
}
.hc-inv:first-child { border-top: 0; }
.hc-inv-m { flex: 1; min-width: 0; }
.hc-inv-n {
  display: block; font-size: .93rem; font-weight: 620; color: var(--hc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-inv-d { display: block; font-size: .83rem; color: var(--hc-muted); }
.hc-inv-d.late { color: var(--hc-c-red); font-weight: 600; }
.hc-inv-a { font-size: 1rem; font-weight: 700; color: var(--hc-text); white-space: nowrap; }
.hc-inv .btn { flex-shrink: 0; }

/* A ticket row. */
.hc-tkt {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem; border-top: 1px solid var(--hc-line);
  color: var(--hc-text-2); text-decoration: none; transition: background var(--hc-fast);
}
.hc-tkt:first-child { border-top: 0; }
.hc-tkt:hover { background: var(--hc-surface-2); text-decoration: none; }
.hc-tkt.wait { background: var(--hc-c-amber-soft); }
.hc-tkt-m { flex: 1; min-width: 0; }
.hc-tkt-t {
  display: block; font-size: .93rem; font-weight: 620; color: var(--hc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-tkt-d { display: block; font-size: .83rem; color: var(--hc-muted); }

/* --------------------------------------------------------------------------
   Dashboard rows: services, domains, tickets, invoices

   One row shape for all four, because they answer the same question — what is
   here, and what does it want from me. The right-hand slot is where they
   differ: a status for a service, "Waiting on you" for a ticket, a Pay button
   for an invoice.
   -------------------------------------------------------------------------- */
.hc-dlist {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
.hc-drow {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem; border-top: 1px solid var(--hc-line);
  color: var(--hc-text-2); text-decoration: none;
  transition: background var(--hc-fast);
}
.hc-drow:first-child { border-top: 0; }
.hc-drow:hover { background: var(--hc-surface-2); text-decoration: none; color: var(--hc-text-2); }
.hc-drow-ic {
  width: 34px; height: 34px; border-radius: var(--hc-r); flex-shrink: 0;
  display: grid; place-items: center; font-size: .95rem;
  background: var(--hc-c-blue-soft); color: var(--hc-c-blue);
}
.hc-drow-ic.c2 { background: var(--hc-c-green-soft); color: var(--hc-c-green); }
.hc-drow-ic.c3 { background: var(--hc-c-amber-soft); color: var(--hc-c-amber); }
.hc-drow-ic.c4 { background: var(--hc-c-red-soft);   color: var(--hc-c-red); }
.hc-drow-m { flex: 1; min-width: 0; }
.hc-drow-t {
  display: block; font-size: .95rem; font-weight: 620; color: var(--hc-text);
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-drow-s { display: block; font-size: .84rem; color: var(--hc-muted); line-height: 1.35; }
.hc-drow-go { color: var(--hc-faint); font-size: .8rem; flex-shrink: 0; }
.hc-drow:hover .hc-drow-go { color: var(--hc-orange); }
.hc-drow-pay { flex-shrink: 0; }

/* A ticket the customer has to answer, and an invoice past its date. Both are
   stated in the row itself rather than as a badge somewhere else on the page. */
.hc-drow.wait { background: var(--hc-c-amber-soft); }
.hc-drow.wait:hover { background: var(--hc-c-amber-soft); }
.hc-tagwait {
  flex-shrink: 0; font-size: .76rem; font-weight: 700; color: var(--hc-c-amber);
  background: var(--hc-surface); border: 1px solid currentColor;
  padding: .1rem .45rem; border-radius: 20px;
}
.hc-drow.late .hc-drow-s { color: var(--hc-c-red); font-weight: 600; }

/* The amount owed. Stated once, large, above the invoices it is the sum of —
   a total split across four rows is a total nobody adds up. */
.hc-due {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-top: 3px solid var(--hc-c-red);
  border-radius: var(--hc-r-lg); overflow: hidden;
}
.hc-due-h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: 1rem 1.1rem .85rem;
}
.hc-due-l { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-muted); }
.hc-due-n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--hc-text); margin-left: auto; }
.hc-due .hc-dlist { border: 0; border-radius: 0; border-top: 1px solid var(--hc-line); }
.hc-dall {
  display: block; padding: .7rem 1.1rem; border-top: 1px solid var(--hc-line);
  font-size: .86rem; font-weight: 600; color: var(--hc-blue); background: var(--hc-surface-2);
}
.hc-dnone {
  background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg);
  padding: 1.1rem; font-size: .9rem; color: var(--hc-muted);
}
.hc-dnone i { color: var(--hc-ok); margin-right: .35rem; }

/* The announcement, when there is one. A link, not a panel. */
.hc-note-link {
  display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem;
  padding: .85rem 1rem; background: var(--hc-surface);
  border: 1px solid var(--hc-line); border-left: 3px solid var(--hc-c-blue);
  border-radius: var(--hc-r-lg); text-decoration: none;
}
.hc-note-link:hover { background: var(--hc-surface-2); text-decoration: none; }
.hc-note-link > i:first-child { color: var(--hc-c-blue); font-size: 1rem; flex-shrink: 0; }
.hc-note-link > span { flex: 1; min-width: 0; }
.hc-note-link strong { display: block; font-size: .93rem; font-weight: 620; color: var(--hc-text); }
.hc-note-link strong + span { display: block; font-size: .82rem; color: var(--hc-muted); }

/* WHMCS's own home panels, restyled to the same card as everything else. */
.hc-dcard {
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); margin-bottom: .9rem; overflow: hidden;
}
.hc-dcard-h {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; background: var(--hc-surface-2);
  border-bottom: 1px solid var(--hc-line);
  font-size: .8rem; font-weight: 650; color: var(--hc-text-2);
}
.hc-dcard-h .btn { margin-left: auto; }
.hc-dcard-b { padding: .9rem 1rem; font-size: .87rem; color: var(--hc-text-2); }
.hc-dcard-b > :last-child { margin-bottom: 0; }
.hc-dcard-f { padding: .6rem 1rem; border-top: 1px solid var(--hc-line); font-size: .82rem; }
/* display and text-decoration are restated rather than inherited from
   Bootstrap: these panels are WHMCS's markup, and one of them being rendered
   somewhere Bootstrap has not loaded turns the rows into a paragraph of
   underlined links. */
.hc-dcard .list-group { border: 0; border-radius: 0; display: block; }
.hc-dcard .list-group-item {
  display: block; text-decoration: none;
  border: 0; border-top: 1px solid var(--hc-line); padding: .65rem 1rem;
  font-size: .87rem; color: var(--hc-text-2); background: transparent;
}
.hc-dcard .list-group-item:first-child { border-top: 0; }
.hc-dcard .list-group-item-action:hover { background: var(--hc-surface-2); color: var(--hc-text); }
.hc-drest { margin-top: 1.4rem; }

.hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .85rem; margin-bottom: 1.4rem; }
.hc-stat {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  background: var(--hc-surface); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg); padding: .85rem .95rem;
  transition: border-color var(--hc-fast);
}
.hc-stat:hover { border-color: var(--hc-line-2); text-decoration: none; }
.hc-stat-ic {
  width: 36px; height: 36px; border-radius: var(--hc-r); flex-shrink: 0;
  display: grid; place-items: center; font-size: .95rem;
  background: var(--hc-blue-soft); color: var(--hc-blue);
}
.hc-stat-ic.accent { background: var(--hc-orange-soft); color: var(--hc-orange); }
.hc-stat-ic.ok   { background: var(--hc-ok-soft);   color: var(--hc-ok); }
.hc-stat-ic.warn { background: var(--hc-warn-soft); color: var(--hc-warn); }
.hc-stat-ic.bad  { background: var(--hc-bad-soft);  color: var(--hc-bad); }
.hc-stat-n { display: block; font-size: 1.3rem; font-weight: 680; line-height: 1.15; color: var(--hc-text); }
.hc-stat-t { display: block; font-size: .78rem; color: var(--hc-muted); line-height: 1.2; }

/* --------------------------------------------------------------------------
   12. Product page hero
   -------------------------------------------------------------------------- */
.hc-prod { background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); margin-bottom: 1rem; overflow: hidden; }
.hc-prod-top { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; flex-wrap: wrap; }
.hc-prod-ic {
  width: 42px; height: 42px; border-radius: var(--hc-r-lg); flex-shrink: 0; display: grid;
  place-items: center; background: var(--hc-blue-soft); color: var(--hc-blue); font-size: 1.1rem;
}
.hc-prod-id { flex: 1; min-width: 180px; }
.hc-prod-group { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hc-muted); }
.hc-prod-id h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.hc-prod-domain { font-size: .84rem; color: var(--hc-muted); word-break: break-all; }
.hc-prod-domain:hover { color: var(--hc-blue); }
.hc-prod-state { margin-left: auto; }
.hc-prod-facts {
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
  padding: .7rem 1.1rem; border-top: 1px solid var(--hc-line); background: var(--hc-surface-2);
}
.hc-fact .k { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hc-faint); }
.hc-fact .v { font-size: .87rem; font-weight: 620; color: var(--hc-text); }
.hc-fact .v small { font-weight: 500; color: var(--hc-muted); }
.hc-prod-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.hc-btn-quiet-danger:hover {
  background: var(--hc-bad-soft) !important; border-color: var(--hc-bad-line) !important; color: var(--hc-bad) !important;
}
.hc-modulewrap { text-align: left; margin-bottom: 1.25rem; }
.hc-modulewrap .module-client-area { text-align: left; }

/* --------------------------------------------------------------------------
   13. Command palette
   -------------------------------------------------------------------------- */
.hc-cmdk { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(16,24,40,.45); padding: 12vh 1rem 1rem; }
.hc-cmdk.on { display: block; }
.hc-cmdk-box { max-width: 540px; margin: 0 auto; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); box-shadow: var(--hc-sh-3); overflow: hidden; }
.hc-cmdk-in { width: 100%; border: 0; border-bottom: 1px solid var(--hc-line); background: transparent; padding: .85rem 1rem; font-size: .95rem; color: var(--hc-text); outline: 0; }
.hc-cmdk-list { max-height: 320px; overflow-y: auto; padding: .35rem; }
.hc-cmdk-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: var(--hc-r); cursor: pointer; color: var(--hc-text-2); font-size: .86rem; text-decoration: none; }
.hc-cmdk-item .hc-ic { width: 18px; text-align: center; color: var(--hc-faint); }
.hc-cmdk-item small { margin-left: auto; color: var(--hc-faint); font-size: .74rem; }
.hc-cmdk-item.on, .hc-cmdk-item:hover { background: var(--hc-orange-soft); color: var(--hc-orange); text-decoration: none; }
.hc-cmdk-none { padding: 1.4rem; text-align: center; color: var(--hc-muted); font-size: .86rem; }

/* --------------------------------------------------------------------------
   14. Footer, guest pages
   -------------------------------------------------------------------------- */
.footer, #footer {
  background: transparent; border-top: 1px solid var(--hc-line);
  margin-top: 1.5rem; padding: 1.1rem 0; color: var(--hc-muted); font-size: .8rem;
}
.footer .nav-link { color: var(--hc-muted); font-size: .8rem; padding: .2rem .6rem .2rem 0; }
.footer .nav-link:hover { color: var(--hc-orange); }
.footer .copyright { color: var(--hc-faint); font-size: .77rem; }

body.hc-guest { padding-left: 0; }
body.hc-guest .hc-canvas { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
body.hc-guest .hc-canvas > .container { width: 100%; }
.hc-brand-c { display: flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--hc-text); text-decoration: none; }
.hc-brand-c img { max-height: 32px; }
.hc-brand-c .hc-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--hc-orange); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }

.hc-guestnav { background: var(--hc-surface); border-bottom: 1px solid var(--hc-line); padding: 0 1rem; }
.hc-guestnav .navbar-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.hc-guestnav .navbar-nav > li > a {
  display: block; padding: .6rem .8rem; color: var(--hc-muted);
  font-size: .85rem; font-weight: 600; border-bottom: 2px solid transparent;
}
.hc-guestnav .navbar-nav > li > a:hover { color: var(--hc-orange); border-bottom-color: var(--hc-orange); }
.hc-guestnav .collapsable-dropdown { display: none !important; }

/* The order pages ship their own layout; give them room and let WHMCS's own
   cart styles run rather than fighting them. */
body.hc-cart .hc-canvas > .container { max-width: 1180px; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
.hc-scrim {
  position: fixed; inset: 0; z-index: 1035; background: rgba(16,24,40,.5);
  opacity: 0; visibility: hidden; transition: opacity var(--hc-med), visibility var(--hc-med);
}
body.hc-drawer .hc-scrim { opacity: 1; visibility: visible; }

@media (max-width: 1280px) {
  /* The inset stays wide here on purpose. The sidebar is still fixed beside
     the content at this width, and it is exactly where the two used to end up
     touching. */
  :root { --hc-gap: 1.35rem; --hc-inset: 1.5rem; --hc-inset-l: 1.5rem; }
}

@media (max-width: 991.98px) {
  body.hc-app { padding-left: 0; }
  /* translateZ from the base rule would win over this and leave the drawer
     open, so the off-screen position is restated as a full transform. */
  .hc-side { transform: translateX(-100%) translateZ(0); box-shadow: var(--hc-sh-3); }
  body.hc-drawer .hc-side { transform: translateZ(0); }
  .hc-search span, .hc-search kbd { display: none; }
  .hc-search { min-width: 0; }
  /* Drawer mode: the sidebar is off-screen, so there is no seam to keep. */
  :root { --hc-gap: 1.15rem; --hc-inset: 1.15rem; --hc-inset-l: 1.15rem; --hc-seam: 0px; }
}

@media (max-width: 767.98px) {
  .hc-top-title { font-size: .93rem; }
  .hc-stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  /* The label is already hidden by d-none; drop the padding so the icon reads
     as an icon button next to the others rather than as a stranded pill. */
  .hc-migrate { padding: 0 .5rem; }
  /* Four tabs across a phone leaves each one 80px wide, which fits the number
     and cuts the word under it in half. Two by two keeps both readable. */
  .hc-dtabs { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hc-dtab { padding: .65rem .7rem; gap: .55rem; }
  .hc-dtab-ic { width: 32px; height: 32px; font-size: .9rem; }
  .hc-dtab-n { font-size: 1.3rem; }
  .hc-dtab-l { font-size: .86rem; }
  .hc-dbar .btn { margin-left: 0; width: 100%; }
  .hc-grids { grid-template-columns: 1fr; }
  .hc-inv { flex-wrap: wrap; }
  .hc-inv-m { flex: 1 1 100%; }
  .hc-inv .btn { margin-left: auto; }
  .hc-drow { padding: .75rem .8rem; gap: .6rem; }
  .hc-drow-pay { padding: .3rem .7rem; font-size: .8rem; }
  .hc-due-n { font-size: 1.45rem; }
  .hc-drow .label.status { display: none; }
  .hc-mig-steps { grid-template-columns: 1fr; }
  .hc-mig-help { flex-wrap: wrap; }
  .hc-mig-help .btn { margin-left: 0; }
  .hc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hc-tab { flex-shrink: 0; }
  .hc-filter { max-width: none; }

  /* Tables become stacked cards. Each cell carries its header in data-label,
     so no column is lost — a horizontally scrolling table on a phone is how
     people miss the due date. */
  /* border-box matters here: width:100% plus row padding otherwise pushes the
     row past .hc-tablewrap's overflow:hidden and clips the right-hand value. */
  table.hc-table, table.hc-table tbody, table.hc-table tr, table.hc-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  table.hc-table thead { display: none; }
  table.hc-table tbody tr {
    border-top: 1px solid var(--hc-line); padding: .75rem .95rem;
  }
  table.hc-table tbody tr:first-child { border-top: 0; }
  table.hc-table tbody td {
    border: 0; padding: .18rem 0; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
  }
  table.hc-table tbody td[data-label]::before {
    content: attr(data-label); flex-shrink: 0;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--hc-faint);
  }
  table.hc-table tbody td.hc-cell-main { padding-bottom: .5rem; }
  table.hc-table tbody td.hc-cell-main::before { display: none; }
  table.hc-table .hc-go { display: none; }
}

/* --------------------------------------------------------------------------
   15b. Phones

   The rule for this block: nothing may make the PAGE scroll sideways. A strip
   of tabs that scrolls inside its own box is fine and deliberate; the whole
   layout sliding under your thumb because one element is 300px wide is not,
   and it is what a customer means when they say the panel is broken on their
   phone. Each rule below is a specific thing that was pushing it.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root { --hc-gap: .9rem; --hc-inset: .9rem; --hc-inset-l: .9rem; }

  /* clip, not hidden: hidden on the body makes it a scroll container and the
     sticky top bar stops sticking. */
  body.hc-app { overflow-x: clip; }

  /* A domain or an email address with no spaces in it is the usual culprit —
     it cannot wrap, so it sets the width of the page. */
  .hc-canvas, .hc-canvas p, table.hc-table td, .hc-primary, .hc-secondary,
  .hc-um-mail, .hc-cell-main { overflow-wrap: anywhere; }

  /* Seven controls in a 375px bar. The title yields first, then the buttons
     tighten; the page name is already in the sidebar and on the page itself. */
  .hc-top { padding: 0 .9rem; gap: .25rem; }
  .hc-top-title { min-width: 0; flex: 1 1 auto; font-size: .88rem; }
  .hc-iconbtn { width: 32px; height: 32px; font-size: .88rem; }
  .hc-migrate { height: 32px; }
  .hc-search { width: 180px; }
  .hc-avatar-btn { width: 30px; height: 30px; font-size: .7rem; }

  /* The drawer covered the whole screen, so the scrim it sits on was never
     visible and there was nothing obvious to tap to close it. */
  .hc-side { width: min(84vw, 300px); }

  .hc-stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hc-stat { padding: .7rem .75rem; }

  /* Buttons that sit on one row on a desktop and half a row on a phone. */
  .hc-toolrow { gap: .45rem; }
  .hc-toolrow .btn { flex: 1 1 auto; }
  .hc-prod-actions { width: 100%; margin-left: 0; }
  .hc-prod-actions .btn { flex: 1 1 auto; }

  .hc-mig-help { align-items: flex-start; }
  .hc-mig-help .btn { width: 100%; margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

@media print {
  .hc-side, .hc-top, .hc-scrim, .hc-cmdk, .hc-tabs, .footer { display: none !important; }
  body.hc-app { padding-left: 0; }
}