/*
 * Sheernox portal theme for ClientExec 7.2.
 * Loads after templates/default/css/vendor.css (Bootstrap 4 + stock ClientExec styles).
 * Chrome classes are prefixed `snx-` because the site's own names (.dropdown-menu, .nav-item,
 * .dropdown-toggle) collide with Bootstrap. Tokens mirror sheernox.com src/styles/global.css.
 */

:root {
  --snx-purple: #9333ea;
  --snx-purple-hover: #7e22ce;
  --snx-violet: #a855f7;
  --snx-cyan: #38bdf8;
  --snx-aurora: linear-gradient(135deg, #a855f7 0%, #38bdf8 100%);
  --snx-emerald: #059669;

  --snx-header-bg: #090217;
  --snx-side-bg: #0b0420;
  --snx-canvas: #f8f6fe;
  --snx-card: #ffffff;
  --snx-card-subtle: #faf7ff;
  --snx-border: rgba(147, 51, 234, 0.16);

  --snx-text-dark: #190838;
  --snx-text-body: #4b3d63;
  --snx-text-muted: #6b5e85; /* darker than the site's #776a91 so small text on white passes WCAG AA */

  /* Surfaces and lines below are what dark mode redefines; theme rules use them instead of literals. */
  --snx-link: #9333ea;
  --snx-link-hover: #7e22ce;
  --snx-focus: #6d28d9;
  --snx-hairline: #f0ebfa;   /* dividers inside a card */
  --snx-line: #e7e0f4;       /* table rules and control outlines */
  --snx-input-border: #dcd3ee;
  --snx-tint: #f3effa;       /* chips, hover fills, segmented controls */
  --snx-glass: rgba(248, 246, 254, 0.86);
  --snx-glow: rgba(168, 85, 247, 0.12);

  /* Status pairs: text on its soft fill passes AA in both themes. */
  --snx-ok: #065f46;      --snx-ok-soft: #ecfdf5;      --snx-ok-line: #6ee7b7;
  --snx-warn: #92400e;    --snx-warn-soft: #fffbeb;    --snx-warn-line: #fcd34d;
  --snx-bad: #991b1b;     --snx-bad-soft: #fef2f2;     --snx-bad-line: #fca5a5;
  --snx-info: #075985;    --snx-info-soft: #f0f9ff;    --snx-info-line: #bae6fd;
  --snx-neutral: #475569; --snx-neutral-soft: #f1f5f9; --snx-neutral-line: #cbd5e1;
  --snx-violet-ink: #6d28d9; --snx-violet-soft: #f5f3ff; --snx-violet-line: #c4b5fd;
  --snx-cyan-ink: #0e7490;   --snx-cyan-soft: #ecfeff;   --snx-cyan-line: #a5f3fc;
  --snx-pink-ink: #be185d;   --snx-pink-soft: #fdf2f8;   --snx-pink-line: #f9a8d4;
  --snx-orange-ink: #c2410c; --snx-orange-soft: #fff7ed; --snx-orange-line: #fdba74;

  --snx-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --snx-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --snx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --snx-max: 1240px;
  --snx-radius-sm: 8px;
  --snx-radius-md: 14px;
  --snx-radius-lg: 22px;
  --snx-shadow: 0 4px 20px rgba(147, 51, 234, 0.06);
  --snx-side-w: 264px;
  --snx-top-h: 64px;
  --snx-network-h: 34px;
}

/* ------------------------------------------------------------------ */
/* Base: undo the stock fixed-header layout and apply the site canvas */
/* ------------------------------------------------------------------ */

body.snx-portal {
  padding: 0; /* no !important: Bootstrap modals set an inline padding-right to stop the page jumping */
  margin: 0;
  height: auto; /* stock sets html, body { height: 100% }, which makes the flex column squash the chrome */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--snx-canvas);
  color: var(--snx-text-body);
  font-family: var(--snx-font);
  border-top: 0;
  -webkit-font-smoothing: antialiased;
}

body.snx-portal h1, body.snx-portal h2, body.snx-portal h3,
body.snx-portal h4, body.snx-portal h5, body.snx-portal h6 {
  font-family: var(--snx-font);
  color: var(--snx-text-dark);
}

/* Not on .btn: anchor buttons (a.btn-danger and friends) keep Bootstrap's own text colours. :where() keeps the
   original (0,1,2) specificity so theme link rules (sidebar, buttons, footer) still win. */
body.snx-portal a:where(:not(.btn)) { color: var(--snx-link); }
body.snx-portal a:where(:not(.btn)):hover { color: var(--snx-link-hover); }

/* Violet ring on light surfaces (6.6:1 on the canvas); cyan only where the background is dark. */
body.snx-portal :focus-visible {
  outline: 2px solid var(--snx-focus);
  outline-offset: 2px;
}
body.snx-portal .snx-side :focus-visible,
body.snx-portal .snx-dropdown-panel :focus-visible,
body.snx-portal .snx-home-hero :focus-visible { outline-color: var(--snx-cyan); }
body.snx-portal .snx-home-search:focus-within { outline: 2px solid var(--snx-cyan); outline-offset: 2px; }

/* Keep focused and anchored content clear of the sticky top bar. */
html { scroll-padding-top: calc(var(--snx-top-h) + 12px); }


body.snx-portal .app-btns { text-transform: none; letter-spacing: 0; }

.snx-main {
  flex: 1 0 auto;
  padding: 28px 0 56px;
}
.snx-main:focus { outline: none; }

.snx-skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1100; /* above the sticky sidebar (1010), which would otherwise hide it on desktop */
  padding: 10px 18px;
  border-radius: var(--snx-radius-sm);
  background: var(--snx-purple);
  color: #fff !important;
  font-weight: 700;
  transition: top 0.15s ease;
}
.snx-skip-link:focus { top: 14px; }

/* ------------------------------------------------------------------ */
/* Network bar: the strip shared by every Sheernox Technology Group site */
/* ------------------------------------------------------------------ */

/* Ported from sheernox.com NetworkHeader.astro; keep the two in step. It scrolls away with the page, so the
   sticky sidebar and top bar still pin to the viewport top. */
.snx-network {
  flex-shrink: 0;
  height: var(--snx-network-h);
  background: #040911;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
}
.snx-network-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--snx-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.snx-network-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.snx-network-tabs::-webkit-scrollbar { display: none; }
body.snx-portal .snx-network-tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
body.snx-portal .snx-network-tab:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
body.snx-portal .snx-network-tab.is-active {
  background: linear-gradient(135deg, var(--snx-purple) 0%, var(--snx-purple-hover) 100%);
  border-right-color: rgba(147, 51, 234, 0.5);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* The scroll container clips an outside ring, so it sits inside; cyan on the dark strip, white on the purple tab. */
body.snx-portal .snx-network-tab:focus-visible { outline-color: var(--snx-cyan); outline-offset: -3px; }
body.snx-portal .snx-network-tab.is-active:focus-visible { outline-color: #fff; }
.snx-network-entity {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 840px) {
  .snx-network-entity { display: none; }
  .snx-network-inner { padding: 0 8px; }
  body.snx-portal .snx-network-tab { padding: 0 10px; font-size: 0.72rem; }
}

/* On narrow screens the later brands sit off-screen in a strip with no scrollbar; fade whichever edge still
   hides links. The scroll timeline is inactive while nothing overflows, and older browsers keep a plain strip. */
@property --snx-network-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --snx-network-fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes snx-network-edge-fade {
  from { --snx-network-fade-start: 0px; --snx-network-fade-end: 28px; }
  10% { --snx-network-fade-start: 28px; }
  90% { --snx-network-fade-end: 28px; }
  to { --snx-network-fade-start: 28px; --snx-network-fade-end: 0px; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 840px) {
    .snx-network-tabs {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--snx-network-fade-start), #000 calc(100% - var(--snx-network-fade-end)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--snx-network-fade-start), #000 calc(100% - var(--snx-network-fade-end)), transparent);
      animation: snx-network-edge-fade linear both;
      animation-timeline: scroll(self inline);
      scroll-padding-inline: 28px; /* keyboard focus scrolls a tab clear of the faded edge */
    }
  }
}

/* ------------------------------------------------------------------ */
/* Shell: dark portal sidebar beside a light work area                 */
/* ------------------------------------------------------------------ */

.snx-shell {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: var(--snx-side-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.snx-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Aurora glow behind the work area: violet from the top right, a trace of cyan on the left. */
  background: radial-gradient(900px 420px at 88% -8%, var(--snx-glow), transparent 70%),
              radial-gradient(700px 380px at -4% 22%, color-mix(in srgb, var(--snx-cyan) 7%, transparent), transparent 70%);
}

.snx-side {
  position: sticky;
  top: 0;
  z-index: 1010; /* above the stock service-page drawer (.sidebar, z-index 1000) */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(circle at 0% 0%, rgba(147, 51, 234, 0.35), transparent 55%), var(--snx-side-bg);
  border-right: 1px solid rgba(168, 85, 247, 0.2);
  color: #d8ccf5;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
}
.snx-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.snx-portal .snx-side-brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; }
/* Sized by width so a narrow drawer scales the logo down instead of squashing it (44px tall at full size). */
.snx-side-logo { width: 196px; max-width: 100%; height: auto; }
.snx-side-mark { display: none; width: 36px; height: 36px; }
.snx-side-brand span { color: #a78bfa; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.snx-side-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--snx-radius-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.snx-side-nav { flex: 1 0 auto; }
.snx-side-group { margin-top: 14px; }
body.snx-portal .snx-side-heading {
  margin: 0 0 6px;
  padding: 0 10px;
  color: #a597c9;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.snx-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
body.snx-portal .snx-side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #d8ccf5;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
body.snx-portal .snx-side-link:hover { background: rgba(147, 51, 234, 0.16); color: #fff; }
body.snx-portal .snx-side-link.is-current {
  background: linear-gradient(90deg, rgba(147, 51, 234, 0.45), rgba(56, 189, 248, 0.15));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--snx-violet);
}
.snx-side-link .snx-ico { opacity: 0.85; }
.snx-side-label { flex: 1; min-width: 0; }

.snx-badge {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.snx-badge[hidden] { display: none; }
.snx-badge--alert { background: rgba(239, 68, 68, 0.22); color: #fecaca; }
.snx-badge--warn { background: rgba(245, 158, 11, 0.22); color: #fde68a; }

.snx-side-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.snx-side-card { padding: 12px 14px; border-radius: var(--snx-radius-md); background: rgba(147, 51, 234, 0.14); border: 1px solid rgba(168, 85, 247, 0.35); }
.snx-side-card[hidden] { display: none; }
body.snx-portal .snx-side-card-label { margin: 0; color: #c4b5fd; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
body.snx-portal .snx-side-card-text { margin: 4px 0 12px; color: #fff; font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.snx-side-card .snx-btn-aurora { width: 100%; }
body.snx-portal .snx-side-card-sub { display: block; margin-top: 8px; color: #c4b5fd; font-size: 0.8rem; text-align: center; }
body.snx-portal .snx-side-card-sub:hover { color: #fff; }

.snx-scrim {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(9, 2, 23, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.snx-scrim[hidden] { display: none; }

/* Icon rail (1025px and wider): the top-bar toggle sets html.snx-rail, which index.phtml restores before first paint.
   Labels and headings stay in the accessibility tree; .snx-tip (sheernox.js) shows the label on hover and focus. */
.snx-tip {
  position: fixed; /* the sidebar scrolls, so a tip inside it would be clipped */
  z-index: 1030;
  padding: 6px 10px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  background: #1a0b38;
  color: #fff;
  font: 600 0.8rem/1.2 var(--snx-font);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(9, 2, 23, 0.35);
}
.snx-tip[hidden] { display: none; }

@media (min-width: 1025px) {
  .snx-top .snx-rail-toggle { display: inline-flex; }
  html.no-js .snx-rail-toggle { display: none; } /* the toggle needs sheernox.js */
  html.snx-rail { --snx-side-w: 76px; }
  html.snx-rail .snx-rail-toggle .snx-ico { transform: scaleX(-1); }
  html.snx-rail .snx-side { padding: 18px 10px 14px; overflow-x: hidden; }
  html.snx-rail .snx-side-head { justify-content: center; padding: 0 0 14px; }
  html.snx-rail .snx-side-logo, html.snx-rail .snx-side-brand span, html.snx-rail .snx-side-card { display: none; }
  html.snx-rail .snx-side-mark { display: block; }
  html.snx-rail .snx-side-heading,
  html.snx-rail .snx-side-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.snx-rail .snx-side-group + .snx-side-group { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  html.snx-rail .snx-side-link { position: relative; justify-content: center; padding: 11px 0; }
  html.snx-rail .snx-side-label ~ .snx-ico { display: none; } /* the external-link mark */
  html.snx-rail .snx-side-link .snx-badge { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 0.6rem; }

  /* The network bar pushes the sticky sidebar down until it scrolls away; grow the sidebar over that first stretch of
     scroll so its foot (the signed-out sign-in card) is never below the fold. Without scroll timelines it keeps
     100vh. */
  @supports (animation-timeline: scroll()) {
    .snx-side {
      height: calc(100vh - var(--snx-network-h));
      animation: snx-side-fill linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--snx-network-h);
    }
  }
}
@keyframes snx-side-fill { to { height: 100vh; } }
@media (prefers-reduced-motion: reduce) {
  .snx-shell { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Top bar                                                             */
/* ------------------------------------------------------------------ */

.snx-top {
  position: sticky;
  top: 0;
  z-index: 900; /* under the stock service-page drawer, which opens over the whole viewport */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--snx-top-h);
  padding: 0 28px;
  background: var(--snx-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--snx-border);
}
.snx-menu-toggle,
.snx-rail-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--snx-input-border);
  border-radius: 10px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  cursor: pointer;
}
body.snx-portal .snx-top-brand { display: none; align-items: center; gap: 8px; color: var(--snx-text-dark); font-weight: 800; text-decoration: none; }
.snx-top-brand img { width: 28px; height: 28px; }
.snx-top-tag { padding: 2px 8px; border-radius: 9999px; background: var(--snx-tint); color: var(--snx-link); font-size: 0.68rem; font-weight: 700; }

.snx-crumb { min-width: 0; }
.snx-crumb ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--snx-text-muted); font-size: 0.86rem; }
/* Only the page title truncates; clipping the link item would hide its focus ring. */
.snx-crumb li { white-space: nowrap; }
.snx-crumb li[aria-current] { overflow: hidden; max-width: 40ch; text-overflow: ellipsis; }
.snx-crumb li + li::before { content: '/'; margin-right: 8px; color: var(--snx-input-border); }
body.snx-portal .snx-crumb a { color: var(--snx-text-muted); text-decoration: none; }
body.snx-portal .snx-crumb a:hover { color: var(--snx-link); }
.snx-crumb [aria-current] { color: var(--snx-text-dark); font-weight: 700; }

.snx-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.snx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.snx-theme-toggle:hover { border-color: var(--snx-violet); color: var(--snx-link); }
.snx-theme-toggle span { display: inline-flex; }
/* The icon shows the mode a click switches to. */
.snx-theme-toggle .snx-theme-to-light,
html[data-snx-theme="dark"] .snx-theme-toggle .snx-theme-to-dark { display: none; }
html[data-snx-theme="dark"] .snx-theme-toggle .snx-theme-to-light { display: inline-flex; }
.snx-top-order { gap: 6px; }

.snx-btn-aurora, body.snx-portal .snx-btn-aurora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 0;
  border-radius: 9999px;
  background: var(--snx-aurora);
  color: #fff;
  font: 700 0.86rem/1.2 var(--snx-font);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.snx-portal .snx-btn-aurora:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.4); }

/* Account menu: dropdowns are visible only with .is-active, which sheernox.js keeps in sync with aria-expanded. */
.snx-account { display: flex; align-items: center; }
.snx-has-dropdown { position: relative; display: flex; align-items: center; }
.snx-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.snx-has-dropdown.is-active > .snx-dropdown-toggle .snx-chevron { transform: rotate(180deg); }

body.snx-portal .snx-btn-line,
.snx-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  font: 600 0.86rem/1.2 var(--snx-font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
body.snx-portal .snx-btn-line:hover,
.snx-account-toggle:hover { border-color: var(--snx-violet); color: var(--snx-link); }
.snx-account-toggle { padding: 4px 12px 4px 4px; }
.snx-avatar img { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Currency switcher: same pill as the account toggle, flag and code as on sheernox.com. */
.snx-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  font: 700 0.82rem/1 var(--snx-font);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.snx-currency-toggle:hover, .snx-has-dropdown--currency.is-active > .snx-currency-toggle { border-color: var(--snx-violet); color: var(--snx-link); }
.snx-currency-flag { font-size: 1rem; line-height: 1; }
.snx-dropdown-panel.snx-dropdown-panel--currency { min-width: 170px; padding: 6px; }
.snx-menu-head { margin: 0; padding: 6px 10px 4px; color: var(--snx-violet); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.snx-dropdown-panel--currency .snx-menu { gap: 3px; }
body.snx-portal .snx-currency-option {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e9d5ff;
  font: 600 0.86rem/1.2 var(--snx-font);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
body.snx-portal .snx-currency-option.is-current { background: rgba(147, 51, 234, 0.35); color: #fff; font-weight: 700; }
.snx-currency-check { margin-left: auto; flex-shrink: 0; color: var(--snx-cyan); opacity: 0; }
.snx-currency-option.is-current .snx-currency-check { opacity: 1; }

.snx-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  padding: 10px;
  background: rgba(15, 5, 34, 0.98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--snx-radius-md);
  box-shadow: 0 18px 45px rgba(25, 8, 56, 0.35), 0 0 30px rgba(147, 51, 234, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.22s;
}
/* Hover bridge across the gap above the panel; kept inside the panel's width so it never widens the page. */
.snx-dropdown-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 16px; }
.snx-has-dropdown.is-active > .snx-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.snx-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
body.snx-portal .snx-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.snx-portal .snx-menu-link:hover, body.snx-portal .snx-menu-link:focus-visible { background: rgba(147, 51, 234, 0.25); color: #fff; }
.snx-menu-link i { width: 16px; color: var(--snx-cyan); text-align: center; }
.snx-menu-sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(168, 85, 247, 0.2); }

/* ------------------------------------------------------------------ */
/* Flash messages                                                      */
/* ------------------------------------------------------------------ */

.snx-messages { flex-shrink: 0; padding-top: 20px; }
.snx-messages .alert { border-radius: var(--snx-radius-md); border-width: 1px; }
/* Identity verification banner (index.phtml, plugins/snapin/snxverify): a checklist card that stays until every enabled
   channel is verified, with the channels as chips and a progress meter beside the next step. */
.snx-vb { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--snx-warn-line); border-left: 4px solid var(--snx-warn); border-radius: var(--snx-radius-md); background: var(--snx-card); box-shadow: var(--snx-shadow); }
.snx-vb-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--snx-warn-soft); color: var(--snx-warn); }
.snx-vb-text { min-width: 0; }
body.snx-portal .snx-vb-text h2 { margin: 0 0 3px; color: var(--snx-text-dark); font: 800 1.02rem/1.25 var(--snx-font-display); }
.snx-vb-text p { margin: 0; color: var(--snx-text-body); font-size: 0.88rem; }
.snx-vb-text .snx-vb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.snx-vb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; }
.snx-vb-chip.is-ok { border-color: var(--snx-ok-line); background: var(--snx-ok-soft); color: var(--snx-ok); }
.snx-vb-chip.is-todo { border-color: var(--snx-warn-line); background: var(--snx-warn-soft); color: var(--snx-warn); }
.snx-vb-chip.is-bad { border-color: var(--snx-bad-line); background: var(--snx-bad-soft); color: var(--snx-bad); }
.snx-vb-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; }
.snx-vb-meter { height: 6px; overflow: hidden; border-radius: 9999px; background: var(--snx-hairline); }
.snx-vb-meter i { display: block; height: 100%; border-radius: 9999px; background: var(--snx-ok); }
.snx-vb-count { color: var(--snx-text-muted); font-size: 0.78rem; font-weight: 700; text-align: right; }
.snx-vb-side .snx-bill-btn { justify-content: center; }
/* "Identity verification required" before signup: register page and checkout step 3 (lib/verify_notice.php). */
.snx-vreq { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--snx-info-line); border-left: 4px solid var(--snx-info); border-radius: var(--snx-radius-md); background: var(--snx-info-soft); text-align: left; }
.snx-vreq-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--snx-card); color: var(--snx-info); }
body.snx-portal .snx-vreq h2 { margin: 0 0 2px; color: var(--snx-text-dark); font: 800 0.95rem/1.3 var(--snx-font-display); }
.snx-vreq p { margin: 0; color: var(--snx-text-body); font-size: 0.86rem; line-height: 1.5; }
.snx-acc-form + .snx-vreq, .snx-vreq + .snx-acc-form { margin-top: 18px; }
@media (max-width: 640px) {
  .snx-vb { grid-template-columns: auto 1fr; }
  .snx-vb-side { grid-column: 1 / -1; min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.snx-foot {
  flex-shrink: 0;
  padding: 22px 28px 26px;
  border-top: 1px solid var(--snx-border);
  color: var(--snx-text-muted);
  font-size: 0.82rem;
}
/* Stock p grey fails contrast on the canvas; keep the footer's own muted tone. */
body.snx-portal .snx-foot p { margin: 0; color: inherit; font-size: inherit; }
.snx-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.snx-foot-row + .snx-foot-row { margin-top: 8px; }
.snx-foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.snx-foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body.snx-portal .snx-foot a { color: var(--snx-text-muted); text-decoration: none; }
body.snx-portal .snx-foot a:hover { color: var(--snx-link); }
.snx-foot-prefs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--snx-border); }
.snx-pref-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.snx-pref-label { font-weight: 600; }
body.snx-portal .snx-pref.is-current { color: var(--snx-text-dark); font-weight: 700; }
/* The Clientexec credit stays as plain text (no link), deliberately faint and below WCAG AA contrast (owner's call,
   2026-10-13). */
body.snx-portal .snx-foot .snx-foot-powered { font-size: 0.66rem; letter-spacing: 0.02em; opacity: 0.4; }
.snx-status-link { display: inline-flex; align-items: center; gap: 7px; }
.snx-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--snx-emerald); box-shadow: 0 0 6px var(--snx-ok-line); }

/* ------------------------------------------------------------------ */
/* Stock content: re-skin ClientExec's orange/blue/Nunito to the site  */
/* ------------------------------------------------------------------ */

body.snx-portal .container { max-width: var(--snx-max); }

body.snx-portal .app-btns,
body.snx-portal .btn {
  border-radius: 9999px;
  font-family: var(--snx-font);
  font-weight: 700;
}
body.snx-portal .app-btns.primary,
body.snx-portal .btn-primary,
body.snx-portal .domain-page .continue-btn {
  background: var(--snx-aurora);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.25);
}
body.snx-portal .app-btns.primary:hover,
body.snx-portal .btn-primary:hover,
body.snx-portal .domain-page .continue-btn:hover {
  background: linear-gradient(135deg, #9333ea 0%, #0ea5e9 100%);
  color: #fff;
}
body.snx-portal .app-btns.secondary,
body.snx-portal .btn-secondary {
  background: var(--snx-card);
  border: 1px solid var(--snx-border);
  color: var(--snx-text-dark);
}
body.snx-portal .app-btns.secondary:hover,
body.snx-portal .btn-secondary:hover { border-color: var(--snx-purple); color: var(--snx-link); }

body.snx-portal .card,
body.snx-portal .data-table-wrapper,
body.snx-portal .product-flex-wrapper .product-flex-item,
body.snx-portal .hosting-plan-row {
  border: 1px solid var(--snx-border);
  border-radius: var(--snx-radius-lg);
  background: var(--snx-card);
  box-shadow: var(--snx-shadow);
}

/* Wide stock tables scroll inside their card on phones only; on wider screens overflow stays visible so
   the service action (cog) menus are not clipped by the scroll container. */
@media (max-width: 768px) {
  body.snx-portal .data-table-wrapper { overflow-x: auto; }
}

body.snx-portal .hosting-plan-row .head h3,
body.snx-portal .product-flex-wrapper .product-flex-item .head .title { color: var(--snx-text-dark); }
body.snx-portal .hosting-plan-row.highlight { border: 2px solid var(--snx-purple); }

body.snx-portal .main-menu > ul > li > a.active,
body.snx-portal .data-table-wrapper table tr td .action:hover,
body.snx-portal .discount-applied ul li .val,
body.snx-portal .summary-row .title .link:hover { color: var(--snx-link); }

body.snx-portal .form-control { border-radius: var(--snx-radius-sm); border-color: var(--snx-input-border); }
body.snx-portal .form-control:focus { border-color: var(--snx-violet); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); }

body.snx-portal .badge-primary { background: var(--snx-purple); }
body.snx-portal code, body.snx-portal pre, body.snx-portal kbd { font-family: var(--snx-font-mono); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .snx-shell { grid-template-columns: minmax(0, 1fr); }
  /* Off-canvas drawer; visibility keeps the closed drawer out of the tab order. */
  .snx-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 86vw);
    height: auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
  }
  .snx-side.is-open { transform: none; visibility: visible; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .snx-side-close, .snx-menu-toggle, body.snx-portal .snx-top-brand { display: inline-flex; }
  .snx-crumb { display: none; }
  .snx-top { gap: 10px; padding: 0 16px; }
  .snx-foot { padding: 20px 16px 24px; }
  /* Without JS the drawer cannot open, so the menu stays in the page flow instead. */
  html.no-js .snx-side { position: static; width: auto; transform: none; visibility: visible; box-shadow: none; }
  html.no-js .snx-menu-toggle, html.no-js .snx-side-close { display: none; }
}

@media (max-width: 600px) {
  .snx-account-toggle .snx-chevron, .snx-currency-toggle .snx-chevron, .snx-top-tag { display: none; }
  .snx-currency-toggle { padding: 0 10px; }
  /* Visually hidden, not display:none, so the account button keeps its accessible name. */
  .snx-account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .snx-account-toggle { padding: 4px; }
  body.snx-portal .snx-top-order { width: 38px; height: 38px; padding: 0; }
  .snx-top-order span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .snx-main { padding: 20px 0 40px; }
  .snx-foot-row { flex-direction: column; align-items: flex-start; }
}

/* Phones narrower than 400px cannot fit the brand, currency code, Order and account; the flag stands in for the code
   (the button's aria-label still names it). */
@media (max-width: 399px) {
  .snx-top { gap: 6px; padding: 0 12px; }
  .snx-top-actions { gap: 6px; }
  .snx-currency-toggle .snx-currency-code { display: none; }
  /* Signed out, the bar also holds Sign in beside the theme toggle; keep it on one line. */
  body.snx-portal .snx-btn-line { padding: 8px 12px; }
  /* The brand gives way first (a late web font can make the name wider than planned) rather than widen the page. */
  body.snx-portal .snx-top-brand { min-width: 0; flex-shrink: 1; }
  .snx-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .snx-dropdown-panel, .snx-chevron, .snx-btn-aurora, .snx-skip-link, .snx-side, body.snx-portal .snx-network-tab { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Stock page surfaces: drop the grey-blue stock canvas and blue art   */
/* ------------------------------------------------------------------ */

body.snx-portal .dashboard-wraper,
body.snx-portal .content-area { background: transparent; }

body.snx-portal .cm-holder { border-radius: var(--snx-radius-lg); border: 1px solid var(--snx-border); box-shadow: var(--snx-shadow); }
body.snx-portal .header-right .current-user a:hover,
body.snx-portal .ticket-view-page .cm-tab-accordion .resp-tabs-list li.resp-tab-active,
body.snx-portal .ranges li.active { color: var(--snx-link); }

/* ------------------------------------------------------------------ */
/* Status rows: stock list pages, tagged by sheernox.js tagStatusRows  */
/* ------------------------------------------------------------------ */

.snx-row { --st: #cbd5e1; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
body.snx-portal table tr.snx-row > td {
  padding: 14px 16px;
  vertical-align: middle;
  background: var(--snx-card);
  border: 0;
  border-top: 2px solid var(--st);
  border-bottom: 2px solid var(--st);
  color: var(--snx-text-body);
}
body.snx-portal table tr.snx-row > td:first-child { border-left: 2px solid var(--st); border-radius: 12px 0 0 12px; }
body.snx-portal table tr.snx-row > td:last-child { border-right: 2px solid var(--st); border-radius: 0 12px 12px 0; }
.snx-row:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--st) 40%, transparent); }
.snx-row-title { font-weight: 700; text-decoration: none !important; color: var(--snx-text-dark) !important; }
.snx-row[data-status] .snx-row-title { color: color-mix(in srgb, var(--st) 75%, var(--snx-text-dark)) !important; }
.snx-row-title:hover { text-decoration: underline !important; }
.snx-row-icon { margin-right: 8px; color: #06b6d4; }
.snx-row-meta { display: block; color: var(--snx-text-muted); font-size: 0.78rem; }
.snx-row-amount { font-weight: 700; color: var(--snx-text-dark); }
.snx-row-date { color: var(--snx-text-muted); }
.snx-cell-end { text-align: right; white-space: nowrap; }
body.snx-portal table tr.snx-row > td.snx-date-overdue { color: var(--snx-bad); font-weight: 700; }
.snx-id-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(147, 51, 234, 0.08);
  color: var(--snx-link) !important;
  font: 600 0.82rem var(--snx-font-mono);
  text-decoration: none !important;
}

/* Beats stock span.status (white uppercase text meant for its old coloured badges). */
body.snx-portal span.snx-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--st) 12%, var(--snx-card));
  color: color-mix(in srgb, var(--st) 70%, var(--snx-text-dark));
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.snx-beacon { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex-shrink: 0; }
.snx-beacon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--st);
  /* A few pulses draw the eye when the page loads, then the dot rests: no idle repainting. */
  animation: snx-ping 2s cubic-bezier(0, 0, 0.2, 1) 3;
}
@keyframes snx-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
/* Only live states pulse; settled ones (paid, closed, cancelled) stay still. */
.snx-row[data-status="paid"] .snx-beacon::after,
.snx-row[data-status="closed"] .snx-beacon::after,
.snx-row[data-status="cancelled"] .snx-beacon::after,
.snx-row[data-status="voided"] .snx-beacon::after,
.snx-row[data-status="refunded"] .snx-beacon::after,
.snx-row[data-status="credited"] .snx-beacon::after,
.snx-row[data-status="neutral"] .snx-beacon::after { display: none; }

/* Status palette (carried over from the earlier portal's 10-status matrix, re-tuned to the brand). */
.snx-row[data-status="active"], .snx-row[data-status="paid"] { --st: var(--snx-emerald); }
.snx-row[data-status="unpaid"] { --st: #8b5cf6; }
.snx-row[data-status="overdue"], .snx-row[data-status="cancelling"], .snx-row[data-status="hold"] { --st: #ef4444; }
.snx-row[data-status="partial"], .snx-row[data-status="pending"], .snx-row[data-status="open"] { --st: #0ea5e9; }
.snx-row[data-status="draft"], .snx-row[data-status="answered"] { --st: #a855f7; }
.snx-row[data-status="credited"] { --st: #14b8a6; }
.snx-row[data-status="refunded"], .snx-row[data-status="suspended"], .snx-row[data-status="progress"] { --st: #f59e0b; }
.snx-row[data-status="voided"] { --st: #94a3b8; }
.snx-row[data-status="cancelled"], .snx-row[data-status="closed"] { --st: #cbd5e1; }
.snx-row[data-status="fraud"] { --st: #991b1b; }
body.snx-portal table tr.snx-row[data-status="cancelled"] > td,
body.snx-portal table tr.snx-row[data-status="closed"] > td,
body.snx-portal table tr.snx-row[data-status="voided"] > td { background: var(--snx-card-subtle); }
@media (prefers-reduced-motion: reduce) {
  .snx-beacon::after { animation: none; }
  .snx-row { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Dashboard (Aurora): views/home/indexpublic/dashboard.phtml, js/dashboard.js */
/* ------------------------------------------------------------------ */

/* The dashboard sizes itself to its own width (the sidebar can be open, a rail or a drawer), not the viewport. */
.snx-db { container: snx-db / inline-size; display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }

/* Tones: --t text on --t-soft fills for pills and icons, --t-bar for meters and dots. */
.snx-db [data-tone="ok"], .snx-bill [data-tone="ok"], .snx-svc [data-tone="ok"] { --t: var(--snx-ok); --t-soft: var(--snx-ok-soft); --t-bar: var(--snx-emerald); }
.snx-db [data-tone="warn"], .snx-bill [data-tone="warn"], .snx-svc [data-tone="warn"] { --t: var(--snx-warn); --t-soft: var(--snx-warn-soft); --t-bar: #f59e0b; }
.snx-db [data-tone="bad"], .snx-bill [data-tone="bad"], .snx-svc [data-tone="bad"] { --t: var(--snx-bad); --t-soft: var(--snx-bad-soft); --t-bar: #ef4444; }
.snx-db [data-tone="info"], .snx-bill [data-tone="info"], .snx-svc [data-tone="info"] { --t: var(--snx-info); --t-soft: var(--snx-info-soft); --t-bar: #0ea5e9; }
.snx-db [data-tone="neutral"], .snx-bill [data-tone="neutral"], .snx-svc [data-tone="neutral"] { --t: var(--snx-neutral); --t-soft: var(--snx-neutral-soft); --t-bar: var(--snx-neutral-line); }
.snx-db [data-tone="brand"], .snx-bill [data-tone="brand"], .snx-svc [data-tone="brand"] { --t: var(--snx-link); --t-soft: var(--snx-violet-soft); --t-bar: var(--snx-violet); }
/* The welcome banner is dark in both themes, so its tones are fixed light values. */
.snx-db-hero [data-tone="ok"], .snx-bill-head [data-tone="ok"], .snx-svc-head [data-tone="ok"] { --t: #86efac; --t-soft: rgba(74, 222, 128, 0.2); --t-bar: #4ade80; }
.snx-db-hero [data-tone="warn"], .snx-bill-head [data-tone="warn"], .snx-svc-head [data-tone="warn"] { --t: #fcd34d; --t-soft: rgba(251, 191, 36, 0.2); --t-bar: #fbbf24; }
.snx-db-hero [data-tone="bad"], .snx-bill-head [data-tone="bad"], .snx-svc-head [data-tone="bad"] { --t: #fda4af; --t-soft: rgba(251, 113, 133, 0.2); --t-bar: #fb7185; }
.snx-db-hero [data-tone="info"], .snx-bill-head [data-tone="info"], .snx-svc-head [data-tone="info"] { --t: #7dd3fc; --t-soft: rgba(125, 211, 252, 0.2); --t-bar: #7dd3fc; }
.snx-db-hero [data-tone="neutral"], .snx-bill-head [data-tone="neutral"], .snx-svc-head [data-tone="neutral"] { --t: #e2e8f0; --t-soft: rgba(226, 232, 240, 0.16); --t-bar: #cbd5e1; }

.snx-db-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--snx-purple), var(--snx-cyan)); color: #fff; }
.snx-db-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--t-bar, var(--snx-neutral-line)); }
.snx-db-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px; background: var(--t-soft); color: var(--t); font-size: 0.75rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.snx-db-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.snx-db-meter { display: flex; gap: 3px; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--snx-tint); }
.snx-db-meter > span { border-radius: 9999px; background: var(--t-bar); }

/* Welcome banner with the balance panel */
.snx-db-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 28px;
  padding: 30px;
  border-radius: var(--snx-radius-lg);
  color: #d9ccf5;
  background: radial-gradient(120% 150% at 0% 0%, #6d28d9 0%, transparent 55%),
              radial-gradient(110% 140% at 100% 100%, rgba(56, 189, 248, 0.55) 0%, transparent 52%),
              #12052b;
}
.snx-db-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.snx-db-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -160px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.025), 0 0 0 120px rgba(255, 255, 255, 0.02);
}
body.snx-portal .snx-db-hero :focus-visible { outline-color: var(--snx-cyan); }
.snx-db-hero-main { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0; }
body.snx-portal .snx-db-eyebrow { margin: 0 0 8px; color: #c4b5fd; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.snx-portal .snx-db-hero h1 { margin: 0; color: #fff; font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--snx-font-display); letter-spacing: -0.02em; }
body.snx-portal .snx-db-company { margin: 8px 0 0; color: #f2edfc; font: 700 clamp(1.05rem, 1.6vw, 1.25rem)/1.3 var(--snx-font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
body.snx-portal .snx-db-standing { margin: 4px 0 0; color: #d9ccf5; font-size: 0.92rem; }
.snx-db-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.snx-db-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 9999px; background: rgba(255, 255, 255, 0.1); color: #ece3ff; font-size: 0.8rem; font-weight: 500; }
body.snx-portal .snx-db-chips a { display: inline-flex; align-items: center; gap: 6px; color: #ece3ff; text-decoration: none; }
body.snx-portal .snx-db-chips a:hover { color: #fff; text-decoration: underline; }
/* A chip that needs the client's attention (expiring card, service notice, account not active). */
.snx-db-chips li.is-warn, .snx-db-chips li[data-tone="warn"], .snx-db-chips li[data-tone="bad"] { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.16); color: #fde68a; }
body.snx-portal .snx-db-chips li.is-warn a { color: #fde68a; }
.snx-db-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.snx-portal .snx-db-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 700 0.86rem/1.2 var(--snx-font);
  text-decoration: none;
  transition: background 0.15s ease;
}
body.snx-portal .snx-db-btn-glass:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.snx-portal .snx-db-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #fff;
  color: #1a0b3d;
  font: 700 0.84rem/1.2 var(--snx-font);
  text-decoration: none;
  white-space: nowrap;
}
body.snx-portal .snx-db-btn-light:hover { background: #f3e8ff; color: #1a0b3d; }

.snx-db-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--snx-radius-md);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.snx-db-panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.snx-db-panel-top .snx-db-pill { margin-left: auto; }
.snx-db-panel .snx-db-ico { background: rgba(255, 255, 255, 0.14); }
body.snx-portal .snx-db-panel-top h2 { margin: 0; color: #d9ccf5; font: 600 0.88rem/1.2 var(--snx-font); white-space: nowrap; }
body.snx-portal .snx-db-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: #fff; font: 800 2.4rem/1 var(--snx-font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.snx-db-amount small { color: #d9ccf5; font: 500 0.85rem var(--snx-font); letter-spacing: 0; }
.snx-db-panel .snx-db-meter { background: rgba(255, 255, 255, 0.14); }
body.snx-portal .snx-db-panel-note { display: flex; align-items: center; gap: 8px; margin: 0; color: #d9ccf5; }
.snx-db-panel-note svg { color: #4ade80; }
.snx-db-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: auto; color: #d9ccf5; font-size: 0.82rem; }
.snx-db-panel-foot .snx-db-btn-light { margin-left: auto; }

/* Short status lines inside the panel and tiles */
.snx-db-lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 0.84rem; }
.snx-db-lines:empty { display: none; }
.snx-db-lines > li, .snx-db-lines > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.snx-db-lines > * > span:not(.snx-db-dot) { flex: 1; min-width: 0; overflow: hidden; color: var(--snx-text-muted); text-overflow: ellipsis; white-space: nowrap; }
body.snx-portal .snx-db-lines a, .snx-db-lines b { color: var(--snx-text-dark); font-weight: 600; text-decoration: none; }
body.snx-portal .snx-db-lines a:hover { text-decoration: underline; }
.snx-db-lines > * > b:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.snx-db-panel .snx-db-lines > * > span:not(.snx-db-dot) { color: #d9ccf5; }
body.snx-portal .snx-db-panel .snx-db-lines a, .snx-db-panel .snx-db-lines b { color: #fff; }

/* Summary tiles: gradient edge, value, meter and the next few things that matter */
.snx-db-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.snx-portal .snx-db-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid transparent;
  border-radius: var(--snx-radius-md);
  background: linear-gradient(var(--snx-card), var(--snx-card)) padding-box,
              linear-gradient(140deg, color-mix(in srgb, var(--snx-violet) 55%, var(--snx-border)), var(--snx-border) 38%, var(--snx-border) 62%, color-mix(in srgb, var(--snx-cyan) 55%, var(--snx-border))) border-box;
  box-shadow: var(--snx-shadow);
  color: var(--snx-text-body);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.snx-portal .snx-db-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--snx-purple) 16%, transparent); color: var(--snx-text-body); }
.snx-db-tile-top { display: flex; align-items: center; gap: 10px; color: var(--snx-text-muted); font-size: 0.84rem; font-weight: 600; }
.snx-db-go { display: flex; margin-left: auto; color: var(--snx-text-muted); transition: transform 0.15s ease, color 0.15s ease; }
.snx-db-tile:hover .snx-db-go { transform: translateX(2px); color: var(--snx-link); }
.snx-db-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 2rem; color: var(--snx-text-dark); font: 800 1.9rem/1.05 var(--snx-font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.snx-db-value small { color: var(--snx-text-muted); font: 500 0.84rem var(--snx-font); letter-spacing: 0; }
.snx-db-tile[aria-busy="true"] .snx-db-value { color: var(--snx-text-muted); }
.snx-db-note { color: var(--snx-text-muted); font-size: 0.8rem; }
.snx-db-foot { margin-top: auto; color: var(--snx-text-muted); font-size: 0.8rem; }

/* Lists and the side column */
.snx-db-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.snx-db-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.snx-db-card { container: card / inline-size; min-width: 0; border: 1px solid var(--snx-border); border-radius: var(--snx-radius-md); background: var(--snx-card); box-shadow: var(--snx-shadow); }
.snx-db-card[hidden] { display: none; }
.snx-db-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px; border-bottom: 1px solid var(--snx-hairline); }
.snx-db-head-ico { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--snx-violet-soft); color: var(--snx-link); }
body.snx-portal .snx-db-card-head h2 { margin: 0; color: var(--snx-text-dark); font: 700 1rem/1.2 var(--snx-font); }
.snx-db-count { padding: 1px 8px; border: 1px solid var(--snx-line); border-radius: 9999px; background: var(--snx-card-subtle); color: var(--snx-text-muted); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body.snx-portal .snx-db-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.82rem; font-weight: 700; text-decoration: none; }
body.snx-portal .snx-db-more:hover { text-decoration: underline; }
.snx-db-head-note { margin-left: auto; color: var(--snx-text-muted); font-size: 0.8rem; }

.snx-db-items { margin: 0; padding: 0; list-style: none; }
body.snx-portal .snx-db-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 16px;
  align-items: center;
  gap: 4px 16px;
  padding: 13px 20px;
  border-top: 1px solid var(--snx-hairline);
  color: var(--snx-text-body);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.snx-db-items > li:first-child > .snx-db-item { border-top: 0; }
body.snx-portal .snx-db-item:hover { background: var(--snx-card-subtle); color: var(--snx-text-body); }
.snx-db-item-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--t-soft); color: var(--t); }
.snx-db-item-main { min-width: 0; }
.snx-db-item-main b, .snx-db-item-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snx-db-item-main b { color: var(--snx-text-dark); font-size: 0.92rem; font-weight: 600; }
.snx-db-item-main span { margin-top: 1px; color: var(--snx-text-muted); font-size: 0.8rem; }
.snx-db-item-meta { color: var(--snx-text-muted); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.snx-db-item-meta b { display: block; color: var(--snx-text-dark); font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.snx-db-item-go { display: flex; color: var(--snx-text-muted); transition: transform 0.12s ease, color 0.12s ease; }
.snx-db-item:hover .snx-db-item-go { transform: translateX(2px); color: var(--snx-link); }
/* Narrow cards (the side column, phones) fold each row onto two lines instead of squeezing or scrolling. */
@container card (max-width: 520px) {
  body.snx-portal .snx-db-item { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 16px; }
  .snx-db-item-ico { grid-row: span 2; align-self: start; }
  .snx-db-item-main { grid-column: 2; grid-row: 1; }
  .snx-db-item > .snx-db-pill { grid-column: 3; grid-row: 1; }
  .snx-db-item-meta { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; white-space: normal; }
  .snx-db-item-meta b { display: inline; font-size: 0.84rem; }
  .snx-db-item-go { display: none; }
}
body.snx-portal .snx-db-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 16px 20px; color: var(--snx-text-muted); font-size: 0.88rem; }
.snx-db-empty svg { color: var(--snx-ok); }

.snx-db-dl { display: flex; flex-direction: column; margin: 0; }
.snx-db-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--snx-hairline); }
.snx-db-dl > div:first-child { border-top: 0; }
.snx-db-dl dt { color: var(--snx-text-muted); font-size: 0.84rem; font-weight: 500; }
.snx-db-dl dd { min-width: 0; margin: 0; color: var(--snx-text-dark); font-size: 0.88rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.snx-db-dd-sub { display: block; color: var(--snx-text-muted); font-size: 0.78rem; font-weight: 500; }
.snx-db-dd-sub[data-tone="warn"] { color: var(--snx-warn); font-weight: 700; }
body.snx-portal .snx-db-dd-link { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 700; text-decoration: none; }
body.snx-portal .snx-db-dd-link:hover { text-decoration: underline; }
/* Info icon with a tooltip (Currency row). The tip shows on hover and keyboard focus, stays open while hovered, and
   Escape hides it (js/dashboard.js), as WCAG 1.4.13 asks. Inverted token colours keep it readable in both themes. */
.snx-db-dd-inline { display: inline-flex; align-items: center; gap: 6px; }
.snx-db-hint { position: relative; display: inline-flex; }
body.snx-portal .snx-db-hint-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--snx-text-muted); text-decoration: none; }
body.snx-portal .snx-db-hint-btn:hover, body.snx-portal .snx-db-hint-btn:focus-visible { background: var(--snx-tint); color: var(--snx-link); }
.snx-db-hint-tip {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 6px);
  z-index: 20;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--snx-text-dark);
  color: var(--snx-card);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: var(--snx-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
/* A transparent strip under the tip bridges the gap, so moving the pointer onto the tip keeps it open. */
.snx-db-hint-tip::after { content: ''; position: absolute; right: 0; bottom: -8px; left: 0; height: 8px; }
.snx-db-hint:hover .snx-db-hint-tip, .snx-db-hint:focus-within .snx-db-hint-tip { opacity: 1; visibility: visible; }
.snx-db-hint.is-dismissed .snx-db-hint-tip { opacity: 0; visibility: hidden; }
.snx-db-line-end { margin-left: auto; color: var(--snx-text-muted); font-weight: 500; white-space: nowrap; }

.snx-db-news { display: flex; flex-direction: column; margin: 0; padding: 4px 20px 16px; list-style: none; }
.snx-db-news li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--snx-hairline); }
.snx-db-news li:first-child { border-top: 0; }
.snx-db-news time { color: var(--snx-text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
body.snx-portal .snx-db-news a { color: var(--snx-text-dark); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
body.snx-portal .snx-db-news a:hover { color: var(--snx-link); text-decoration: underline; }
body.snx-portal .snx-db-news p { margin: 0; color: var(--snx-text-muted); font-size: 0.82rem; line-height: 1.5; }

body.snx-portal .snx-db-card-foot { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--snx-hairline); color: var(--snx-text-muted); font-size: 0.8rem; }
.snx-db-card-foot b { color: var(--snx-text-dark); font-variant-numeric: tabular-nums; }

.snx-db-quickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px 10px 18px; border: 1px solid var(--snx-border); border-radius: var(--snx-radius-md); background: var(--snx-card); box-shadow: var(--snx-shadow); }
body.snx-portal .snx-db-quickbar-title { margin: 0; color: var(--snx-text-muted); font: 700 0.72rem/1.4 var(--snx-font); letter-spacing: 0.08em; text-transform: uppercase; }
.snx-db-quickbar ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.snx-portal .snx-db-quickbar a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--snx-line); border-radius: 9999px; background: var(--snx-card-subtle); color: var(--snx-text-dark); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
body.snx-portal .snx-db-quickbar a:hover { border-color: var(--snx-violet); color: var(--snx-link); }
.snx-db-quickbar svg { flex-shrink: 0; color: var(--snx-link); }

@container snx-db (max-width: 1100px) {
  .snx-db-cols { grid-template-columns: minmax(0, 1fr); }
  .snx-db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container snx-db (max-width: 900px) {
  .snx-db-hero { grid-template-columns: minmax(0, 1fr); }
}
@container snx-db (max-width: 560px) {
  .snx-db-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .snx-db-hero { gap: 20px; padding: 22px 18px; }
  body.snx-portal .snx-db-amount { font-size: 2rem; }
  .snx-db-quickbar { padding: 12px 14px; }
  .snx-db-panel-foot .snx-db-btn-light { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.snx-portal .snx-db-tile, .snx-db-go, .snx-db-item-go, body.snx-portal .snx-db-item, body.snx-portal .snx-db-quickbar a, .snx-db-hint-tip { transition: none; }
  body.snx-portal .snx-db-tile:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Billing (Aurora): views/billing/invoicepublic, layoutpartials/paymentMethod*, js/billing.js */
/* ------------------------------------------------------------------ */

.snx-bill { container: snx-bill / inline-size; display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.snx-bill-eyebrow { display: block; margin: 0; color: var(--snx-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.snx-portal .snx-bill-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.snx-bill-back svg { transform: scaleX(-1); }
body.snx-portal .snx-bill-back:hover { text-decoration: underline; }
body.snx-portal .snx-bill-notice { margin: 0; border-radius: var(--snx-radius-md); }
body.snx-portal .snx-bill-notice a { margin-left: 4px; font-weight: 700; }

body.snx-portal .snx-bill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  font: 700 0.84rem/1.2 var(--snx-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
body.snx-portal .snx-bill-btn:hover { border-color: var(--snx-violet); color: var(--snx-link); }
body.snx-portal .snx-bill-btn--primary, body.snx-portal .snx-bill-btn--primary:hover { border-color: transparent; background: var(--snx-aurora); color: #fff; }
body.snx-portal .snx-bill-btn--primary:hover { filter: brightness(1.06); }
body.snx-portal .snx-bill-btn--ghost { border-color: transparent; background: transparent; color: var(--snx-link); }
body.snx-portal .snx-bill-btn--sm { padding: 5px 12px; font-size: 0.78rem; }
body.snx-portal .snx-bill-btn:disabled { opacity: 0.6; cursor: wait; }

/* Invoice list */
.snx-bill-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.snx-bill-pagehead > .snx-bill-btn { margin-left: auto; }
body.snx-portal .snx-bill-pagehead h1 { margin: 0; color: var(--snx-text-dark); font: 800 clamp(1.5rem, 2.4vw, 1.9rem)/1.15 var(--snx-font-display); letter-spacing: -0.02em; }
body.snx-portal .snx-bill-summary { margin: 4px 0 0; color: var(--snx-text-muted); }
.snx-bill-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.snx-bill-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--snx-border); border-radius: var(--snx-radius-md); background: var(--snx-card); box-shadow: var(--snx-shadow); }
.snx-bill-kpi span { color: var(--snx-text-muted); font-size: 0.84rem; font-weight: 600; }
.snx-bill-kpi b { color: var(--snx-text-dark); font: 800 1.6rem/1.1 var(--snx-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.snx-bill-kpi[data-tone="bad"] b { color: var(--snx-bad); }
.snx-bill-kpi small { min-height: 1.1em; color: var(--snx-text-muted); font-size: 0.8rem; }

.snx-bill-list { overflow: visible; }
.snx-bill-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-bottom: 1px solid var(--snx-hairline); }
.snx-bill-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--snx-line); border-radius: 9999px; background: var(--snx-tint); }
body.snx-portal .snx-bill-seg a { padding: 6px 14px; border-radius: 9999px; color: var(--snx-text-body); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
body.snx-portal .snx-bill-seg a:hover { color: var(--snx-text-dark); }
body.snx-portal .snx-bill-seg a[aria-current="page"] { background: var(--snx-card); color: var(--snx-text-dark); box-shadow: 0 1px 3px rgba(25, 8, 56, 0.12); }
.snx-bill-search { position: relative; flex: 0 1 280px; min-width: 0; margin: 0 0 0 auto; }
.snx-bill-search svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--snx-text-muted); }
body.snx-portal .snx-bill-search input { width: 100%; height: 38px; padding: 0 14px 0 34px; border: 1px solid var(--snx-input-border); border-radius: 9999px; background: var(--snx-card); color: var(--snx-text-dark); font: 500 0.88rem var(--snx-font); }
.snx-bill-selectbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 20px; border-bottom: 1px solid var(--snx-hairline); background: var(--snx-violet-soft); color: var(--snx-text-dark); font-size: 0.86rem; font-weight: 700; }
.snx-bill-selectbar[hidden] { display: none; }
.snx-bill-selectbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

body.snx-portal table.snx-bill-table { width: 100% !important; margin: 0; border-collapse: collapse; font-size: 0.88rem; }
body.snx-portal table.snx-bill-table.no-footer { border-bottom: 0; }
body.snx-portal table.snx-bill-table thead th {
  padding: 10px 20px;
  border: 0;
  border-bottom: 1px solid var(--snx-line);
  background-color: var(--snx-card-subtle);
  color: var(--snx-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
body.snx-portal table.snx-bill-table tbody tr { background: transparent; }
body.snx-portal table.snx-bill-table tbody td { padding: 13px 20px; border-top: 0; border-bottom: 1px solid var(--snx-hairline); color: var(--snx-text-body); vertical-align: middle; }
body.snx-portal table.snx-bill-table tbody tr:last-child td { border-bottom: 0; }
body.snx-portal table.snx-bill-table tbody tr:hover td { background: var(--snx-card-subtle); }
body.snx-portal table.snx-bill-table .snx-num, body.snx-portal table.snx-bill-table thead th.snx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.snx-portal table.snx-bill-table .snx-end { text-align: right; white-space: nowrap; }
body.snx-portal table.snx-bill-table .snx-nowrap { white-space: nowrap; }
body.snx-portal table.snx-bill-table b { color: var(--snx-text-dark); font-weight: 600; }
body.snx-portal table.snx-bill-table .snx-bill-selectcol { width: 44px; padding-right: 0; }
.snx-bill-table input[type="checkbox"], .snx-bill-check input { width: 16px; height: 16px; accent-color: var(--snx-purple); }
.snx-bill-inv { display: inline-flex; align-items: center; gap: 8px; }
body.snx-portal .snx-bill-rowlink { color: var(--snx-text-dark); font-weight: 700; text-decoration: none; }
body.snx-portal .snx-bill-rowlink:hover { color: var(--snx-link); text-decoration: underline; }
body.snx-portal .snx-bill-pdf { display: inline-flex; color: var(--snx-text-muted); }
body.snx-portal .snx-bill-pdf:hover { color: var(--snx-link); }
.snx-bill-sub { display: block; margin-top: 2px; color: var(--snx-text-muted); font-size: 0.8rem; }
.snx-bill-tag { color: var(--t); font-weight: 700; }
.snx-bill-tableerror { padding: 20px !important; color: var(--snx-bad) !important; }
.snx-bill-tablefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--snx-hairline); color: var(--snx-text-muted); font-size: 0.8rem; }
body.snx-portal .snx-bill-tablefoot .dataTables_info { padding: 0; }
body.snx-portal .snx-bill-tablefoot .dataTables_paginate { padding: 0; }
/* Narrow cards stack each row into a labelled block instead of scrolling sideways. The invoice list (seven
   columns) folds at 760px of card width, line items (three or four) at 520px. */
@container card (max-width: 760px) {
  body.snx-portal table.snx-bill-stack-760 thead { display: none; }
  body.snx-portal table.snx-bill-stack-760, body.snx-portal table.snx-bill-stack-760 tbody, body.snx-portal table.snx-bill-stack-760 tr, body.snx-portal table.snx-bill-stack-760 td { display: block; width: 100%; }
  body.snx-portal table.snx-bill-stack-760 tbody tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--snx-hairline); }
  body.snx-portal table.snx-bill-stack-760 tbody tr:last-child { border-bottom: 0; }
  body.snx-portal table.snx-bill-stack-760 tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  body.snx-portal table.snx-bill-stack-760 tbody td::before { content: attr(data-label); color: var(--snx-text-muted); font-size: 0.78rem; font-weight: 600; text-align: left; }
  body.snx-portal table.snx-bill-stack-760 tbody td.snx-bill-primary { display: block; padding-bottom: 6px; text-align: left; }
  body.snx-portal table.snx-bill-stack-760 tbody td.snx-bill-primary::before, body.snx-portal table.snx-bill-stack-760 tbody td.snx-end::before { display: none; }
  body.snx-portal table.snx-bill-stack-760 tbody td.snx-bill-selectcol { position: absolute; top: 14px; right: 16px; width: auto; padding: 0; }
  body.snx-portal table.snx-bill-stack-760 tbody td.snx-bill-selectcol::before { display: none; }
  body.snx-portal table.snx-bill-stack-760 tbody td.snx-end { justify-content: flex-start; padding-top: 8px; }
  body.snx-portal table.snx-bill-stack-760 tbody tr:hover td { background: transparent; }
  body.snx-portal table.snx-bill-stack-760 td.dataTables_empty { display: block; text-align: left; }
}
@container card (max-width: 520px) {
  body.snx-portal table.snx-bill-stack-520 thead { display: none; }
  body.snx-portal table.snx-bill-stack-520, body.snx-portal table.snx-bill-stack-520 tbody, body.snx-portal table.snx-bill-stack-520 tr, body.snx-portal table.snx-bill-stack-520 td { display: block; width: 100%; }
  body.snx-portal table.snx-bill-stack-520 tbody tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--snx-hairline); }
  body.snx-portal table.snx-bill-stack-520 tbody tr:last-child { border-bottom: 0; }
  body.snx-portal table.snx-bill-stack-520 tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  body.snx-portal table.snx-bill-stack-520 tbody td::before { content: attr(data-label); color: var(--snx-text-muted); font-size: 0.78rem; font-weight: 600; text-align: left; }
  body.snx-portal table.snx-bill-stack-520 tbody td.snx-bill-primary { display: block; padding-bottom: 6px; text-align: left; }
  body.snx-portal table.snx-bill-stack-520 tbody td.snx-bill-primary::before, body.snx-portal table.snx-bill-stack-520 tbody td.snx-end::before { display: none; }
  body.snx-portal table.snx-bill-stack-520 tbody td.snx-bill-selectcol { position: absolute; top: 14px; right: 16px; width: auto; padding: 0; }
  body.snx-portal table.snx-bill-stack-520 tbody td.snx-bill-selectcol::before { display: none; }
  body.snx-portal table.snx-bill-stack-520 tbody td.snx-end { justify-content: flex-start; padding-top: 8px; }
  body.snx-portal table.snx-bill-stack-520 tbody tr:hover td { background: transparent; }
  body.snx-portal table.snx-bill-stack-520 td.dataTables_empty { display: block; text-align: left; }
}

/* Invoice */
.snx-bill-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 28px;
  padding: 26px 30px;
  border-radius: var(--snx-radius-lg);
  color: #d9ccf5;
  background: radial-gradient(120% 150% at 0% 0%, #6d28d9 0%, transparent 55%),
              radial-gradient(110% 140% at 100% 100%, rgba(56, 189, 248, 0.5) 0%, transparent 52%),
              #12052b;
}
.snx-bill-head .snx-bill-eyebrow { color: #c4b5fd; }
body.snx-portal .snx-bill-head :focus-visible { outline-color: var(--snx-cyan); }
body.snx-portal .snx-bill-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; color: #fff; font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--snx-font-display); letter-spacing: -0.02em; }
.snx-bill-head h1 .snx-db-pill { font-family: var(--snx-font); letter-spacing: 0; }
.snx-bill-dates { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 0; }
.snx-bill-dates dt { color: #c4b5fd; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.snx-bill-dates dd { margin: 2px 0 0; color: #fff; font-weight: 600; }
.snx-bill-head-amount { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
body.snx-portal .snx-bill-amount { margin: 4px 0 14px; color: #fff; font: 800 2.4rem/1 var(--snx-font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.snx-bill-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.snx-portal .snx-bill-head .snx-bill-btn { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); color: #fff; }
body.snx-portal .snx-bill-head .snx-bill-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.snx-bill-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.snx-bill-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 18px 20px; }
.snx-bill-parties address { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--snx-text-body); font-size: 0.9rem; font-style: normal; line-height: 1.5; }
.snx-bill-parties address b { color: var(--snx-text-dark); }
.snx-bill-parties .snx-bill-eyebrow { margin-bottom: 4px; }
.snx-bill-items td.snx-bill-primary b { display: block; color: var(--snx-text-dark); font-weight: 700; }
.snx-bill-totals { display: flex; flex-direction: column; gap: 6px; width: min(360px, 100%); margin: 0 0 0 auto; padding: 12px 20px 18px; font-variant-numeric: tabular-nums; }
.snx-bill-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.snx-bill-totals dt { color: var(--snx-text-muted); font-weight: 500; }
.snx-bill-totals dd { margin: 0; color: var(--snx-text-dark); font-weight: 600; }
.snx-bill-totals .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--snx-input-border); }
.snx-bill-totals .is-total dt, .snx-bill-totals .is-total dd { color: var(--snx-text-dark); font-size: 1.05rem; font-weight: 800; }
.snx-bill-transactions { padding: 12px 20px 18px; border-top: 1px solid var(--snx-hairline); }
body.snx-portal .snx-bill-transactions .recorded { margin: 4px 0 0; color: var(--snx-text-body); font-size: 0.86rem; }
.snx-bill-prose { padding: 14px 20px 18px; color: var(--snx-text-body); font-size: 0.9rem; overflow-wrap: anywhere; }
body.snx-portal .snx-bill-prose p { margin: 0 0 0.6em; color: inherit; }
.snx-bill-side-note { padding: 16px 20px; }
body.snx-portal .snx-bill-side-note p { margin: 0; }

/* Pay card: gateway fields and iframes assume a light page, so the card keeps light tokens in both themes. */
.snx-bill-pay {
  --snx-card: #ffffff;
  --snx-card-subtle: #faf7ff;
  --snx-border: rgba(147, 51, 234, 0.18);
  --snx-hairline: #f0ebfa;
  --snx-line: #e7e0f4;
  --snx-input-border: #cfc4e6;
  --snx-tint: #f3effa;
  --snx-text-dark: #190838;
  --snx-text-body: #4b3d63;
  --snx-text-muted: #6b5e85;
  --snx-link: #9333ea;
  --snx-link-hover: #7e22ce;
  --snx-focus: #6d28d9;
  --snx-violet-soft: #f5f3ff;
  container: card / inline-size;
  color-scheme: light;
  border: 1px solid var(--snx-border);
  border-radius: var(--snx-radius-md);
  background: var(--snx-card);
  box-shadow: 0 10px 30px rgba(25, 8, 56, 0.1);
  color: var(--snx-text-body);
}
body.snx-portal .snx-bill-pay h1, body.snx-portal .snx-bill-pay h2 { margin: 0; color: var(--snx-text-dark); font: 700 1rem/1.2 var(--snx-font); }
.snx-bill-pay-amount { margin-left: auto; color: var(--snx-text-dark); font: 800 1.05rem var(--snx-font-display); font-variant-numeric: tabular-nums; }
.snx-bill-methods, .snx-bill-fields { min-width: 0; margin: 0; padding: 16px 20px 0; border: 0; }
.snx-bill-fields-title { margin: 0 0 10px; padding: 0; color: var(--snx-text-muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
body.snx-portal .snx-bill-pay .row.snx-bill-options { display: grid; gap: 10px; margin: 0; }
body.snx-portal .snx-bill-pay .snx-bill-option-col { max-width: none; padding: 0; }
body.snx-portal .snx-bill-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--snx-line);
  border-radius: var(--snx-radius-sm);
  background: var(--snx-card);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.snx-portal .snx-bill-option:hover { border-color: var(--snx-violet); }
body.snx-portal .snx-bill-option:has(input:checked) { border-color: var(--snx-purple); background: var(--snx-card-subtle); box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.14); }
body.snx-portal .snx-bill-option:has(input:focus-visible) { outline: 2px solid var(--snx-focus); outline-offset: 2px; }
.snx-bill-option input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--snx-purple); }
.snx-bill-option-text { display: flex; flex-direction: column; min-width: 0; }
.snx-bill-option-text b { color: var(--snx-text-dark); font-size: 0.92rem; font-weight: 700; }
.snx-bill-option-text small { color: var(--snx-text-muted); font-size: 0.78rem; }
.snx-bill-empty { margin: 0; padding: 16px 20px 0; color: var(--snx-text-muted); }
.snx-bill-fields { padding-top: 14px; }
.snx-bill-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.snx-bill-field { min-width: 0; margin: 0; }
.snx-bill-field--wide { grid-column: 1 / -1; }
body.snx-portal .snx-bill-field label { display: block; margin: 0 0 4px; color: var(--snx-text-dark); font-size: 0.82rem; font-weight: 600; }
body.snx-portal .snx-bill-pay .form-control,
body.snx-portal .snx-bill-pay .custom-select { height: 42px; border-color: var(--snx-input-border); border-radius: var(--snx-radius-sm); background-color: #fff; color: var(--snx-text-dark); }
body.snx-portal .snx-bill-pay .select2-container--default .select2-selection--single { height: 42px; border-color: var(--snx-input-border); border-radius: var(--snx-radius-sm); background-color: #fff; }
body.snx-portal .snx-bill-pay .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--snx-text-dark); }
.snx-bill-pay-actions { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
body.snx-portal .snx-bill-pay-actions .makeDefaultOption label { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--snx-text-body); font-size: 0.84rem; font-weight: 500; }
.snx-bill-pay-actions .makeDefaultOption input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--snx-purple); }
.snx-bill-pay .paymentbutton1 { display: block; }
body.snx-portal .snx-bill-pay .snx-bill-submit,
body.snx-portal .snx-bill-pay .paymentbutton2 .app-btns,
body.snx-portal .snx-bill-pay .paymentbutton2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; font-size: 0.95rem; }
.snx-bill-link { max-width: 560px; margin: 8px auto 0; }
body.snx-portal .snx-bill-link-note { margin: 0; padding: 16px 20px 0; color: var(--snx-text-body); }

body.snx-portal .snx-bill-modal .modal-content { border: 1px solid var(--snx-border); border-radius: var(--snx-radius-md); }
body.snx-portal .snx-bill-modal .modal-title { margin: 0; color: var(--snx-text-dark); font: 700 1.1rem/1.3 var(--snx-font); }
body.snx-portal .snx-bill-modal-note { color: var(--snx-text-muted); font-size: 0.86rem; }
.snx-bill-modal .modal-footer { gap: 8px; }

@container snx-bill (max-width: 1100px) {
  .snx-bill-cols { grid-template-columns: minmax(0, 1fr); }
  /* On one column, paying comes before the details. */
  .snx-bill-cols > .snx-db-stack:last-child { order: -1; }
}
@container snx-bill (max-width: 760px) {
  .snx-bill-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .snx-bill-head { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .snx-bill-head-amount { align-items: flex-start; text-align: left; }
  .snx-bill-actions { justify-content: flex-start; }
  body.snx-portal .snx-bill-amount { font-size: 2rem; }
  .snx-bill-parties { grid-template-columns: minmax(0, 1fr); }
  .snx-bill-search { flex-basis: 100%; margin-left: 0; }
  .snx-bill-selectbar-actions { margin-left: 0; }
}
@container card (max-width: 340px) {
  .snx-bill-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .snx-bill-pay, .snx-bill-actions, .snx-bill-back { display: none !important; }
  .snx-bill-head { color: #190838; background: none; border: 1px solid #ddd; }
  body.snx-portal .snx-bill-head h1, body.snx-portal .snx-bill-amount, .snx-bill-dates dd { color: #190838; }
}
@media (prefers-reduced-motion: reduce) {
  body.snx-portal .snx-bill-btn, body.snx-portal .snx-bill-option { transition: none; }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Services (Aurora): views/clients/productspublic, lib/service_{list,cards}.php, js/services.js */
/* ------------------------------------------------------------------ */

/* Lists. The table sits in stock's .data-table-wrapper so stock main.js drives the row menu; the prefix below outweighs
   stock's table rules there (70vw width, 120px cell minimum, zebra fills) and the theme's 1399px tightening. */
body.snx-portal .snx-svc-list .data-table-wrapper { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.snx-bill-seg button { padding: 6px 14px; border: 0; border-radius: 9999px; background: transparent; color: var(--snx-text-body); font: 600 0.84rem/1.2 var(--snx-font); cursor: pointer; }
.snx-bill-seg button:hover { color: var(--snx-text-dark); }
.snx-bill-seg button[aria-pressed="true"] { background: var(--snx-card); color: var(--snx-text-dark); box-shadow: 0 1px 3px rgba(25, 8, 56, 0.12); }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table { width: 100% !important; margin: 0; border: 0; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table thead th { padding: 10px 20px; background-color: var(--snx-card-subtle); font-size: 0.72rem; font-weight: 700; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody td { position: static; min-width: 0; padding: 13px 20px; background: transparent; color: var(--snx-text-body); font-size: inherit; font-weight: 400; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody tr:hover td { background: var(--snx-card-subtle); }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td.snx-bill-primary { overflow-wrap: anywhere; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td.snx-end { width: 1%; }
.snx-svc-cogwrap { position: relative; display: inline-flex; margin-left: 6px; vertical-align: middle; }
.snx-svc-cogspace { display: inline-block; width: 34px; margin-left: 6px; vertical-align: middle; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td .cog-drop-down { top: calc(100% + 10px); right: 0; margin: 0; list-style: none; text-align: left; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td .cog-drop-down.pull-it { top: calc(100% + 6px); }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td .cog-drop-down li a { display: block; text-decoration: none; }
body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td .cog-drop-down > li:not(:has(a)) { padding: 9px 16px; color: var(--snx-text-muted); font-size: 0.85rem; }
@container card (max-width: 760px) {
  body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody td { padding: 3px 0; }
  body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody td.snx-bill-primary { padding-bottom: 6px; }
  body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody td.snx-end { width: 100%; padding-top: 8px; }
  body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table tbody tr:hover td { background: transparent; }
  body.snx-portal .snx-svc-list .data-table-wrapper table.snx-svc-table td .cog-drop-down { right: auto; left: 0; }
}

/* Service page */
.snx-svc { container: snx-svc / inline-size; display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.snx-svc-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 26px 30px;
  border-radius: var(--snx-radius-lg);
  color: #d9ccf5;
  background: radial-gradient(120% 150% at 0% 0%, #6d28d9 0%, transparent 55%),
              radial-gradient(110% 140% at 100% 100%, rgba(56, 189, 248, 0.5) 0%, transparent 52%),
              #12052b;
}
.snx-svc-head > div { min-width: 0; }
.snx-svc-head .snx-bill-eyebrow { color: #c4b5fd; }
body.snx-portal .snx-svc-head :focus-visible { outline-color: var(--snx-cyan); }
body.snx-portal .snx-svc-head h1 { margin: 4px 0 0; color: #fff; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--snx-font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.snx-svc-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; }
.snx-svc-head-sub > span:not(.snx-db-pill) { display: inline-flex; align-items: center; gap: 6px; color: #e9e1fb; font-size: 0.88rem; font-weight: 600; }
.snx-svc-head-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.snx-svc-head-facts dt { color: #c4b5fd; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.snx-svc-head-facts dd { margin: 2px 0 0; color: #fff; font: 700 1.15rem/1.3 var(--snx-font); font-variant-numeric: tabular-nums; }
.snx-svc-head-facts small { color: #d9ccf5; font-size: 0.8rem; font-weight: 600; }

.snx-svc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.snx-svc-dl dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
body.snx-portal .snx-svc-dl dt label { margin: 0; color: inherit; font: inherit; }
.snx-svc-mono { font-family: var(--snx-font-mono); font-size: 0.86em; }
.snx-svc-pre { max-height: 60vh; margin: 0; padding: 12px; overflow: auto; border-radius: var(--snx-radius-sm); background: var(--snx-card-subtle); color: var(--snx-text-dark); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.snx-muted { color: var(--snx-text-muted); font-weight: 500; }
body.snx-portal .snx-svc-link, body.snx-portal .snx-svc-dl dd a { padding: 0; border: 0; background: none; color: var(--snx-link); font: 700 0.86rem/1.4 var(--snx-font); text-align: right; text-decoration: none; cursor: pointer; }
body.snx-portal .snx-svc-link:hover, body.snx-portal .snx-svc-dl dd a:hover { color: var(--snx-link-hover); text-decoration: underline; }

/* Switch: a native checkbox (role="switch"), so keyboard and state come for free. */
.snx-svc-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-tint);
  appearance: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.snx-svc-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--snx-text-muted); transition: transform 0.15s ease, background 0.15s ease; }
.snx-svc-switch:checked { border-color: transparent; background: var(--snx-purple); }
.snx-svc-switch:checked::after { background: var(--snx-card); transform: translateX(18px); }

.snx-svc-addons { margin: 0; padding: 0; list-style: none; }
.snx-svc-addons li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; border-top: 1px solid var(--snx-hairline); }
.snx-svc-addons li:first-child { border-top: 0; }
.snx-svc-addons .snx-db-item-main { display: flex; flex-direction: column; min-width: 0; }
.snx-svc-addons .snx-db-item-main b { color: var(--snx-text-dark); font-weight: 600; }
.snx-svc-addons .snx-db-item-main span { color: var(--snx-text-muted); font-size: 0.84rem; }
.snx-svc-addons .snx-db-item-meta { display: flex; flex-direction: column; align-items: flex-end; color: var(--snx-text-muted); font-size: 0.82rem; text-align: right; }
.snx-svc-addons .snx-db-item-meta b { color: var(--snx-text-dark); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Manage card (productheader.phtml): the service's pages, then plugin quick actions. */
.snx-svc-nav { margin: 0; padding: 8px; list-style: none; }
body.snx-portal .snx-svc-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--snx-text-body); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
body.snx-portal .snx-svc-nav a > span { flex: 1; min-width: 0; }
body.snx-portal .snx-svc-nav a i { width: 18px; color: var(--snx-text-muted); text-align: center; }
body.snx-portal .snx-svc-nav a svg { color: var(--snx-text-muted); }
body.snx-portal .snx-svc-nav a:hover { background: var(--snx-card-subtle); color: var(--snx-text-dark); }
body.snx-portal .snx-svc-nav a[aria-current="page"] { background: var(--snx-violet-soft); color: var(--snx-link); }
body.snx-portal .snx-svc-nav a[aria-current="page"] i { color: var(--snx-link); }
body.snx-portal .snx-svc-subhead { margin: 0; padding: 12px 20px 0; border-top: 1px solid var(--snx-hairline); color: var(--snx-text-muted); font: 700 0.72rem/1.4 var(--snx-font); letter-spacing: 0.08em; text-transform: uppercase; }

/* Service subpages: name servers, host records, contact, cancellation, plan change, plugin panels. Labels need the
   body prefix to outweigh the theme's general label rule further down. */
.snx-svc [hidden] { display: none !important; }
.snx-svc-cardnote { margin: 0; padding: 14px 20px 0; color: var(--snx-text-body); font-size: 0.88rem; }
.snx-svc-state { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
body.snx-portal .snx-svc-state p { margin: 0; color: var(--snx-text-dark); font-weight: 600; }
.snx-db-head-ico[data-tone], .snx-svc-state .snx-db-head-ico { background: var(--t-soft); color: var(--t); }
.snx-svc-form { padding: 16px 20px 0; }
.snx-svc-formfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 14px 20px; border-top: 1px solid var(--snx-hairline); }
.snx-svc-form .snx-svc-formfoot { margin: 16px -20px 0; }
.snx-svc-formfoot > :first-child:not(:last-child) { margin-right: auto; }
body.snx-portal .snx-svc-btn--danger, body.snx-portal .snx-svc-btn--danger:hover { border-color: transparent; background: var(--snx-bad); color: var(--snx-card); }
body.snx-portal .snx-svc-btn--danger:hover { filter: brightness(1.08); }
.snx-svc-iconbtn { display: inline-grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; padding: 0; border: 1px solid var(--snx-input-border); border-radius: var(--snx-radius-sm); background: var(--snx-card); color: var(--snx-text-muted); cursor: pointer; }
.snx-svc-iconbtn:hover:not(:disabled) { border-color: var(--snx-bad-line); color: var(--snx-bad); }
.snx-svc-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }

.snx-svc-records, .snx-svc-dnslist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 20px 0; list-style: none; }
.snx-svc-dnslist:empty { display: none; }
.snx-svc-record { display: grid; grid-template-columns: 130px minmax(0, 1fr) 38px; align-items: center; gap: 10px; }
body.snx-portal .snx-svc-record label { margin: 0; color: var(--snx-text-muted); font-size: 0.84rem; font-weight: 600; }
.snx-svc-dns { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.6fr) 38px; align-items: end; gap: 10px; }
body.snx-portal .snx-svc-dns label { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.snx-svc-dns label > span { color: var(--snx-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* Column labels show once, above the first record; later rows keep them for screen readers. */
.snx-svc-dns:not(:first-child) label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.snx-svc-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 16px 20px 0; }
.snx-svc-fieldbreak { grid-column: 1 / -1; }

.snx-svc-choices { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 16px 20px; border: 0; }
.snx-svc-form .snx-svc-choices, .snx-svc-choices--compact { padding: 0; }
.snx-svc-form .snx-svc-choices { margin-bottom: 16px; }
body.snx-portal .snx-svc-choices legend { margin: 0 0 8px; color: var(--snx-text-dark); font-size: 0.9rem; font-weight: 700; }
body.snx-portal .snx-svc-choice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--snx-input-border); border-radius: var(--snx-radius-sm); background: var(--snx-card); color: var(--snx-text-body); font-weight: 400; cursor: pointer; }
body.snx-portal .snx-svc-choice:hover { border-color: var(--snx-violet); }
body.snx-portal .snx-svc-choice:has(input:checked) { border-color: var(--snx-purple); background: var(--snx-violet-soft); box-shadow: inset 0 0 0 1px var(--snx-purple); }
.snx-svc-choice input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--snx-purple); }
.snx-svc-choice > span:not(.snx-db-pill) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.snx-svc-choice b { color: var(--snx-text-dark); font-weight: 600; }
.snx-svc-choice small { color: var(--snx-text-muted); font-size: 0.82rem; }

.snx-upg-desc { padding: 0 20px 16px; color: var(--snx-text-body); font-size: 0.88rem; }
.snx-upg-desc ul { margin: 0; padding-left: 18px; }
.snx-upg-addons { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
body.snx-portal .snx-upg-addon-label, body.snx-portal .snx-upg-addon legend { display: block; margin: 0 0 6px; color: var(--snx-text-dark); font-size: 0.9rem; font-weight: 700; }
.snx-upg-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--snx-text-body); }
body.snx-portal .snx-upg-qty input.quantity { width: 90px; }
.snx-upg-qty select { flex: 1; min-width: 0; }
body.snx-portal .snx-upg-addon-note { margin: 6px 0 0; color: var(--snx-text-muted); font-size: 0.82rem; }
/* The summary column (not the card) sticks: a grid item can travel the whole form height. A class, not :last-child,
   because stock app.js appends a sessionHash input to every form. */
.snx-upg-side { position: sticky; top: calc(var(--snx-top-h) + 16px); }
.snx-upg-summary .snx-svc-formfoot { margin-top: 0; }
.snx-upg-total dt, .snx-upg-total dd { color: var(--snx-text-dark); font-size: 1rem; font-weight: 800; }
/* Plugin panels: the page is never dark-ready, so plugin markup keeps the light colours it assumes. */
.snx-svc-panel { padding: 20px; }
/* Enhance "Resource usage" panel, drawn from the rows the plugin override sets ($view->enhanceUsage). */
.snx-svc-usage { margin: 0; padding: 0; list-style: none; }
.snx-svc-usage li { display: grid; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--snx-hairline); }
.snx-svc-usage li:last-child { border-bottom: 0; }
.snx-svc-usage-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.snx-svc-usage-name { color: var(--snx-text-dark); font-weight: 700; }
.snx-svc-usage-val { color: var(--snx-text-muted); font-variant-numeric: tabular-nums; }
.snx-svc-usage-val b { color: var(--snx-text-dark); }
.snx-svc-usage-notice { display: flex; align-items: flex-start; gap: 10px; margin: 16px 20px 4px; padding: 10px 14px; border-radius: 12px; background: var(--t-soft); color: var(--t); font-size: 0.88rem; font-weight: 600; }
.snx-svc-usage-notice svg { flex-shrink: 0; margin-top: 2px; }
body.snx-portal .snx-svc-usage-notice a { color: inherit; font-weight: 800; text-decoration: underline; }
.snx-svc-usage-updated { margin: 0; padding: 0 20px 16px; color: var(--snx-text-muted); font-size: 0.78rem; }
/* Panel rings for the main resources: the fill is a circle stroke drawn to --p of a 100-unit path, swept in from 0 on load. */
.snx-svc-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 18px 10px; margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--snx-hairline); list-style: none; }
.snx-svc-rings li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.snx-svc-ring { position: relative; width: 84px; height: 84px; margin-bottom: 6px; }
.snx-svc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.snx-svc-ring circle { fill: none; stroke-width: 7; }
.snx-svc-ring-track { stroke: var(--snx-tint); }
.snx-svc-ring-fill { stroke: var(--t-bar); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: snx-ring-sweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.snx-svc-rings .is-unlimited .snx-svc-ring-fill { stroke: color-mix(in srgb, var(--t-bar) 28%, transparent); }
.snx-svc-ring-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--snx-text-dark); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.snx-svc-ring-mid small { color: var(--snx-text-muted); font-size: 0.72rem; font-weight: 700; }
.snx-svc-rings .is-unlimited .snx-svc-ring-mid { font-size: 1.5rem; }
.snx-svc-ring-label { color: var(--snx-text-dark); font-size: 0.86rem; font-weight: 700; }
.snx-svc-ring-sub { color: var(--snx-text-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
@keyframes snx-ring-sweep { from { stroke-dasharray: 0 100; } }
@media (prefers-reduced-motion: reduce) {
  .snx-svc-ring-fill { animation: none; }
}

@container snx-svc (max-width: 900px) {
  .snx-svc-cols { grid-template-columns: minmax(0, 1fr); }
  /* On one column the Manage card comes before the details. */
  .snx-svc-cols > .snx-db-stack:last-child { order: -1; }
}
@container snx-svc (max-width: 560px) {
  .snx-svc-head { padding: 22px 18px; }
}
@container snx-svc (max-width: 900px) {
  /* The order summary stays after the choices it totals. */
  .snx-svc-cols > .snx-upg-side { position: static; order: 0; }
}
@container card (max-width: 560px) {
  .snx-svc-record { grid-template-columns: minmax(0, 1fr) 38px; gap: 4px 10px; }
  .snx-svc-record label { grid-column: 1 / -1; }
  .snx-svc-dns { grid-template-columns: minmax(0, 1fr) 110px; padding-bottom: 12px; border-bottom: 1px solid var(--snx-hairline); }
  .snx-svc-dns-value { grid-column: 1 / -1; }
  .snx-svc-dns .snx-svc-iconbtn { grid-column: 2; justify-self: end; }
  .snx-svc-dns:not(:first-child) label > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .snx-svc-fieldgrid { grid-template-columns: minmax(0, 1fr); }
}
@container card (max-width: 420px) {
  .snx-svc-dl > div { flex-wrap: wrap; }
  .snx-svc-dl dd { justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .snx-svc-switch, .snx-svc-switch::after { transition: none; }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Support (Aurora): views/support */
/* ------------------------------------------------------------------ */

/* Ticket list */
/* Custom columns can make the list wide; tighter cells and breakable values keep it inside the card until it stacks. */
@container card (min-width: 761px) {
  body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) thead th, body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) tbody td { padding-left: 14px; padding-right: 14px; }
  body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) thead th:first-child, body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) tbody td:first-child { padding-left: 20px; }
  body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) thead th:last-child, body.snx-portal table.snx-tk-table:not(.snx-tk-table--wide) tbody td:last-child { padding-right: 20px; }
}
@container card (min-width: 1081px) {
  body.snx-portal table.snx-tk-table--wide thead th, body.snx-portal table.snx-tk-table--wide tbody td { padding-left: 14px; padding-right: 14px; }
  body.snx-portal table.snx-tk-table--wide thead th:first-child, body.snx-portal table.snx-tk-table--wide tbody td:first-child { padding-left: 20px; }
  body.snx-portal table.snx-tk-table--wide thead th:last-child, body.snx-portal table.snx-tk-table--wide tbody td:last-child { padding-right: 20px; }
}
/* With ClientExec custom fields the list has six or more columns, so it stacks at 1080px of card width instead. */
@container card (max-width: 1080px) {
  body.snx-portal table.snx-tk-table--wide thead { display: none; }
  body.snx-portal table.snx-tk-table--wide, body.snx-portal table.snx-tk-table--wide tbody, body.snx-portal table.snx-tk-table--wide tr, body.snx-portal table.snx-tk-table--wide td { display: block; width: 100%; }
  body.snx-portal table.snx-tk-table--wide tbody tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--snx-hairline); }
  body.snx-portal table.snx-tk-table--wide tbody tr:last-child { border-bottom: 0; }
  body.snx-portal table.snx-tk-table--wide tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  body.snx-portal table.snx-tk-table--wide tbody td::before { content: attr(data-label); color: var(--snx-text-muted); font-size: 0.78rem; font-weight: 600; text-align: left; }
  body.snx-portal table.snx-tk-table--wide tbody td.snx-bill-primary { display: block; padding-bottom: 6px; text-align: left; }
  body.snx-portal table.snx-tk-table--wide tbody td.snx-bill-primary::before, body.snx-portal table.snx-tk-table--wide tbody td.snx-end::before { display: none; }
  body.snx-portal table.snx-tk-table--wide tbody td.snx-end { justify-content: flex-start; padding-top: 8px; }
  body.snx-portal table.snx-tk-table--wide tbody tr:hover td { background: transparent; }
  body.snx-portal table.snx-tk-table--wide td.dataTables_empty { display: block; text-align: left; }
}

body.snx-portal .snx-tk-table td.snx-bill-primary { min-width: 180px; overflow-wrap: anywhere; }
body.snx-portal .snx-tk-table td.snx-tk-custom-cell, body.snx-portal .snx-tk-table td.snx-tk-service { overflow-wrap: break-word; }
/* Department and last-reply chips on ticket rows (lib/ticket_chips.php). The dashboard row's main column makes every
   inner span a truncating block, so the chips undo that. */
.snx-tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.snx-tk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border: 1px solid var(--d-line, var(--snx-line)); border-radius: 8px; background: var(--d-soft, var(--snx-tint)); color: var(--d, var(--snx-text-body)); font-size: 0.75rem; font-weight: 700; line-height: 1.55; white-space: nowrap; }
.snx-tk-chip .snx-ico { flex-shrink: 0; }
/* One colour per ticket type (lib/ticket_chips.php); a type it does not know keeps the plain lavender chip. */
.snx-tk-chip[data-dept="abuse"] { --d: var(--snx-bad); --d-soft: var(--snx-bad-soft); --d-line: var(--snx-bad-line); }
.snx-tk-chip[data-dept="tech"] { --d: var(--snx-cyan-ink); --d-soft: var(--snx-cyan-soft); --d-line: var(--snx-cyan-line); }
.snx-tk-chip[data-dept="sales"] { --d: var(--snx-violet-ink); --d-soft: var(--snx-violet-soft); --d-line: var(--snx-violet-line); }
.snx-tk-chip[data-dept="billing"] { --d: var(--snx-ok); --d-soft: var(--snx-ok-soft); --d-line: var(--snx-ok-line); }
.snx-tk-chip[data-dept="general"] { --d: var(--snx-neutral); --d-soft: var(--snx-neutral-soft); --d-line: var(--snx-neutral-line); }
.snx-tk-chip[data-dept="migrations"] { --d: var(--snx-warn); --d-soft: var(--snx-warn-soft); --d-line: var(--snx-warn-line); }
.snx-tk-chip[data-dept="domains"] { --d: var(--snx-info); --d-soft: var(--snx-info-soft); --d-line: var(--snx-info-line); }
.snx-tk-chip[data-dept="email"] { --d: var(--snx-pink-ink); --d-soft: var(--snx-pink-soft); --d-line: var(--snx-pink-line); }
.snx-tk-chip[data-dept="care"] { --d: var(--snx-orange-ink); --d-soft: var(--snx-orange-soft); --d-line: var(--snx-orange-line); }
.snx-tk-chip--reply { --d: var(--snx-text-body); --d-soft: var(--snx-card-subtle); font-weight: 600; }
.snx-tk-chip--reply time { color: var(--snx-text-dark); font-weight: 700; }
.snx-tk-chip--reply.is-fresh { --d-soft: var(--snx-ok-soft); --d-line: var(--snx-ok-line); }
/* Pulses a few times on load, like .snx-beacon, then rests. */
.snx-tk-fresh { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--snx-emerald); animation: snx-tk-ping 1.8s ease-out 3; }
@keyframes snx-tk-ping { 0% { box-shadow: 0 0 0 0 var(--snx-ok-line); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .snx-tk-fresh { animation: none; } }
.snx-db-dl .snx-tk-chips { justify-content: flex-end; margin-top: 0; }
.snx-db-item-main .snx-tk-chips { display: flex; overflow: visible; white-space: normal; }
.snx-db-item-main .snx-tk-chips .snx-tk-chip { display: inline-flex; margin: 0; overflow: visible; font-size: 0.75rem; color: var(--d, var(--snx-text-body)); }
.snx-db-item-main .snx-tk-chips .snx-tk-fresh { display: inline-block; margin: 0; }
.snx-tk-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px 44px; text-align: center; }
body.snx-portal .snx-tk-empty p { margin: 0; color: var(--snx-text-muted); font-size: 0.92rem; }

/* Ticket head: the dark band's buttons, glass like the invoice head, with Reply in white. */
.snx-tk-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.snx-portal .snx-tk-head .snx-bill-btn { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); color: #fff; }
body.snx-portal .snx-tk-head .snx-bill-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
body.snx-portal .snx-tk-head .snx-tk-btn-light, body.snx-portal .snx-tk-head .snx-tk-btn-light:hover { border-color: transparent; background: #fff; color: #1a0b3d; }
body.snx-portal .snx-tk-head .snx-tk-btn-light:hover { background: #f3e8ff; }
.snx-tk-head h1 { overflow-wrap: anywhere; }

/* Conversation: a thread of messages, staff replies tinted violet with the brand avatar. */
.snx-tk-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; cursor: pointer; }
body.snx-portal .snx-tk-sort span { color: var(--snx-text-muted); font-size: 0.82rem; font-weight: 600; }
.snx-tk-msgs { margin: 0; padding: 4px 20px 20px; list-style: none; }
.snx-tk-msgs > li { position: relative; padding-top: 16px; }
.snx-tk-msgs > li:not(:last-child)::before { content: ''; position: absolute; top: 56px; bottom: -16px; left: 17px; width: 2px; border-radius: 2px; background: var(--snx-hairline); }
.snx-tk-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; scroll-margin-top: calc(var(--snx-top-h) + 16px); }
.snx-tk-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--snx-line); border-radius: 50%; background: var(--snx-tint); color: var(--snx-text-dark); font: 700 0.76rem/1 var(--snx-font); letter-spacing: 0.02em; }
.snx-tk-msg[data-author="staff"] .snx-tk-avatar { border-color: transparent; background: var(--snx-aurora); color: #fff; }
.snx-tk-bubble { min-width: 0; padding: 12px 16px 14px; border: 1px solid var(--snx-line); border-radius: 4px var(--snx-radius-md) var(--snx-radius-md) var(--snx-radius-md); background: var(--snx-card); }
.snx-tk-msg[data-author="staff"] .snx-tk-bubble { border-color: var(--snx-violet-line); background: var(--snx-violet-soft); }
.snx-tk-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; font-size: 0.84rem; }
.snx-tk-msg-head b { color: var(--snx-text-dark); font-size: 0.9rem; font-weight: 700; }
.snx-tk-badge { padding: 1px 8px; border-radius: 9999px; background: var(--snx-card); color: var(--snx-link); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.snx-tk-email { min-width: 0; color: var(--snx-text-muted); overflow-wrap: anywhere; }
.snx-tk-msg-head time, .snx-tk-when { margin-left: auto; color: var(--snx-text-muted); font-size: 0.8rem; white-space: nowrap; }
/* Message bodies are ClientExec's stored markup: keep its formatting readable and inside the bubble. */
.snx-tk-body { color: var(--snx-text-body); font-size: 0.92rem; line-height: 1.6; overflow-wrap: anywhere; }
body.snx-portal .snx-tk-body p { margin: 0 0 0.7em; color: inherit; font-size: inherit; }
.snx-tk-body > :last-child { margin-bottom: 0; }
.snx-tk-body ul, .snx-tk-body ol { margin: 0 0 0.7em; padding-left: 1.3em; }
.snx-tk-body ul { list-style: disc; }
.snx-tk-body ol { list-style: decimal; }
.snx-tk-body blockquote { margin: 0 0 0.7em; padding: 2px 0 2px 12px; border-left: 3px solid var(--snx-line); color: var(--snx-text-muted); }
.snx-tk-body code { padding: 1px 5px; border-radius: 5px; background: var(--snx-tint); color: var(--snx-text-dark); font: 0.86em var(--snx-font-mono); }
.snx-tk-body pre { margin: 0 0 0.7em; padding: 10px 12px; border-radius: var(--snx-radius-sm); background: var(--snx-tint); color: var(--snx-text-dark); font: 0.82rem/1.5 var(--snx-font-mono); white-space: pre-wrap; }
.snx-tk-body pre code { padding: 0; background: none; }
.snx-tk-body img { max-width: 100%; height: auto; }
.snx-tk-body table { max-width: 100%; }
body.snx-portal .snx-tk-body a { text-decoration: underline; }
.snx-tk-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--snx-line); list-style: none; }
body.snx-portal .snx-tk-thumb { display: flex; flex-direction: column; width: 148px; overflow: hidden; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-sm); background: var(--snx-card); color: var(--snx-text-body); font-size: 0.75rem; text-decoration: none; }
.snx-tk-thumb img { display: block; width: 100%; height: 84px; object-fit: cover; background: var(--snx-tint); }
.snx-tk-thumb span, .snx-tk-filechip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snx-tk-thumb span { padding: 5px 8px; }
body.snx-portal .snx-tk-thumb:hover { border-color: var(--snx-violet); color: var(--snx-link); }
body.snx-portal .snx-tk-filechip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--snx-line); border-radius: 9999px; background: var(--snx-card); color: var(--snx-text-dark); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.snx-tk-filechip svg { flex-shrink: 0; color: var(--snx-link); }
body.snx-portal .snx-tk-filechip:hover { border-color: var(--snx-violet); color: var(--snx-link); }

/* Reply and new ticket forms */
.snx-tk-reply { scroll-margin-top: calc(var(--snx-top-h) + 16px); }
body.snx-portal .snx-tk-reply textarea.form-control, body.snx-portal .snx-tk-form textarea.form-control { min-height: 140px; resize: vertical; }
.snx-tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
body.snx-portal .snx-tk-label { display: block; margin-bottom: 0.5rem; color: var(--snx-text-dark); font-weight: 600; }
body.snx-portal .snx-tk-hint { margin: 6px 0 0; color: var(--snx-text-muted); font-size: 0.8rem; line-height: 1.5; }
body.snx-portal .snx-tk-files .snx-tk-hint { margin: 0 0 8px; }
.snx-tk-files { margin-bottom: 4px; }
.snx-tk-filelist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.snx-tk-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px dashed var(--snx-input-border); border-radius: var(--snx-radius-sm); background: var(--snx-card-subtle); }
body.snx-portal .snx-tk-file .btn-file { flex: 1; min-width: 0; margin: 0; font-weight: 400; cursor: pointer; }
.snx-tk-file input[type="file"] { width: 100%; max-width: 100%; color: var(--snx-text-body); font: 0.84rem var(--snx-font); cursor: pointer; }
.snx-tk-file input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 1px solid var(--snx-input-border); border-radius: 9999px; background: var(--snx-card); color: var(--snx-text-dark); font: 700 0.8rem/1.2 var(--snx-font); cursor: pointer; }
.snx-tk-file input[type="file"]:hover::file-selector-button { border-color: var(--snx-violet); color: var(--snx-link); }
body.snx-portal .snx-tk-file-remove { display: inline-flex; align-items: center; gap: 5px; color: var(--snx-bad); font-size: 0.8rem; font-weight: 700; text-decoration: none; cursor: pointer; }
body.snx-portal .snx-tk-file-remove:hover { color: var(--snx-bad); text-decoration: underline; }
body.snx-portal .snx-tk-files #new-file-button { padding-left: 4px; }
.snx-tk-form .parsley-errors-list, .snx-tk-reply .parsley-errors-list, .snx-tk-fields .parsley-errors-list { margin: 6px 0 0; padding: 0; color: var(--snx-bad); font-size: 0.82rem; font-weight: 600; list-style: none; }
body.snx-portal .snx-tk-form .form-control.parsley-error, body.snx-portal .snx-tk-reply .form-control.parsley-error { border-color: var(--snx-bad); }
/* select2 hides the department select; its box gets the same size and outline as the theme's inputs. */
body.snx-portal .snx-tk-form .select2-container--default .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); border-color: var(--snx-input-border); border-radius: var(--snx-radius-sm); }
body.snx-portal .snx-tk-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.75rem); padding-left: 12px; color: var(--snx-text-dark); }
/* The department picker shows each option as its ticket chip (js/support.js), in a dropdown that opens inside the form. */
body.snx-portal .snx-tk-form .select2-selection__rendered .snx-tk-chip { vertical-align: middle; }
body.snx-portal .snx-tk-form .select2-dropdown { overflow: hidden; border-color: var(--snx-line); border-radius: var(--snx-radius-sm); background: var(--snx-card); box-shadow: var(--snx-shadow); }
body.snx-portal .snx-tk-form .select2-search--dropdown { padding: 8px; }
body.snx-portal .snx-tk-form .select2-search--dropdown .select2-search__field { padding: 6px 10px; border: 1px solid var(--snx-input-border); border-radius: var(--snx-radius-sm); background: var(--snx-card); color: var(--snx-text-dark); }
body.snx-portal .snx-tk-form .select2-results__option { padding: 6px 10px; color: var(--snx-text-body); }
body.snx-portal .snx-tk-form .select2-results__option .snx-tk-chip { margin: 1px 0; }
body.snx-portal .snx-tk-form .select2-container--default .select2-results__option[aria-selected="true"],
body.snx-portal .snx-tk-form .select2-container--default .select2-results__option--selected { background: var(--snx-card-subtle); }
body.snx-portal .snx-tk-form .select2-container--default .select2-results__option.select2-results__option--highlighted { background: var(--snx-tint); color: var(--snx-text-dark); }
body.snx-portal .snx-tk-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 0.75rem); }

/* Guides for the chosen department (stock top questions). */
.snx-tk-suggest:empty { display: none; }
.snx-tk-suggest { margin: 8px 0 16px; padding: 12px 14px; border: 1px solid var(--snx-info-line); border-radius: var(--snx-radius-sm); background: var(--snx-info-soft); }
body.snx-portal .snx-tk-suggest h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--snx-info); font: 700 0.84rem/1.4 var(--snx-font); }
.snx-tk-articles { margin: 0; padding: 0; list-style: none; }
.snx-tk-articles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 0; font-size: 0.86rem; }
body.snx-portal .snx-tk-articles a { font-weight: 600; }
.snx-tk-articles-cat { color: var(--snx-text-muted); font-size: 0.76rem; }

/* Department custom fields: ClientExec's own row and column markup from customfieldsfortype. */
.snx-tk-custom { margin: 4px 0 16px; padding: 14px 16px 0; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-sm); background: var(--snx-card-subtle); }
body.snx-portal .snx-tk-custom .customfields-header { margin: 0 0 12px; color: var(--snx-text-dark); font: 700 0.9rem/1.3 var(--snx-font); }
.snx-tk-custom .form-elem { padding-bottom: 0; margin-bottom: 14px; }
body.snx-portal .snx-tk-custom .form-elem label { margin-bottom: 0.5rem; font-size: inherit; }
body.snx-portal .snx-tk-custom .form-elem input.form-control, body.snx-portal .snx-tk-custom .form-elem select.form-control { height: calc(1.5em + 0.75rem + 2px); font-size: 1rem; }

/* Plugin and captcha markup assumes a light page, so its surface keeps light tokens in both themes. */
.snx-tk-light {
  --snx-card: #ffffff;
  --snx-card-subtle: #faf7ff;
  --snx-line: #e7e0f4;
  --snx-input-border: #cfc4e6;
  --snx-text-dark: #190838;
  --snx-text-body: #4b3d63;
  --snx-text-muted: #6b5e85;
  --snx-link: #9333ea;
  --snx-link-hover: #7e22ce;
  --snx-focus: #6d28d9;
  color-scheme: light;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--snx-radius-sm);
  background: var(--snx-card);
  color: var(--snx-text-body);
}
.snx-tk-plugin { padding: 16px 20px; border: 1px solid var(--snx-border); border-radius: var(--snx-radius-md); box-shadow: var(--snx-shadow); }
.snx-tk-captcha { display: inline-block; margin: 4px 0 8px; padding: 8px; border: 1px solid var(--snx-line); }

/* Side cards and the closed state */
.snx-tk-links { margin: 0; padding: 8px; list-style: none; }
body.snx-portal .snx-tk-links a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px; text-decoration: none; }
body.snx-portal .snx-tk-links a:hover { background: var(--snx-card-subtle); }
.snx-tk-links b { display: inline-flex; align-items: center; gap: 6px; color: var(--snx-text-dark); font-size: 0.88rem; font-weight: 700; }
.snx-tk-links b svg { color: var(--snx-text-muted); }
.snx-tk-links span { color: var(--snx-text-muted); font-size: 0.8rem; }
body.snx-portal .snx-tk-links a:hover b { color: var(--snx-link); }
.snx-tk-fields { padding-bottom: 0; }
/* A service name is long; it reads better under its label than squeezed beside it. */
.snx-db-dl > .snx-tk-dl-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.snx-tk-dl-stack dd { text-align: left; }
.snx-tk-closed { align-items: flex-start; }
.snx-tk-closed > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.snx-portal .snx-tk-closed p { font-weight: 500; color: var(--snx-text-body); }

/* Rating follow-up */
.snx-tk-rate { align-items: center; padding-top: 24px; }
.snx-tk-rate-card { width: min(560px, 100%); }
.snx-tk-rate-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 24px 8px; text-align: center; }
.snx-tk-rate-top .snx-db-head-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--t-soft); color: var(--t); }
body.snx-portal .snx-tk-rate-top h1 { margin: 6px 0 0; color: var(--snx-text-dark); font: 800 1.5rem/1.2 var(--snx-font-display); letter-spacing: -0.02em; }
body.snx-portal .snx-tk-rate-top p { margin: 0; color: var(--snx-text-body); }
.snx-tk-rate-card > .snx-svc-formfoot { justify-content: center; margin-top: 20px; }
.snx-tk-rate-card > .snx-svc-formfoot > :first-child:not(:last-child) { margin-right: 0; }
.snx-tk-tweet { margin: 4px 0 8px; text-align: center; }

@container snx-svc (max-width: 900px) {
  /* The conversation and the form come before the side cards on one column. */
  .snx-svc-cols.snx-tk-cols > .snx-db-stack:last-child { order: 0; }
}
@container card (max-width: 560px) {
  .snx-tk-grid { grid-template-columns: minmax(0, 1fr); }
  .snx-tk-msgs { padding: 0 14px 16px; }
  .snx-tk-msg { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .snx-tk-avatar { width: 30px; height: 30px; font-size: 0.68rem; }
  .snx-tk-msgs > li:not(:last-child)::before { top: 50px; left: 14px; }
  .snx-tk-bubble { padding: 10px 12px 12px; }
  .snx-tk-msg-head time, .snx-tk-when { flex-basis: 100%; margin-left: 0; }
  body.snx-portal .snx-tk-thumb { width: 120px; }
}
@container snx-svc (max-width: 560px) {
  .snx-tk-head-actions { width: 100%; }
}


/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Account (Aurora): views/clients/userprofilepublic, twofactorpublic, indexpublic/emailhistory, home announcement */
/* ------------------------------------------------------------------ */

/* Account card (lib/account_frame.php): the section's pages, in the Manage card's list style. */
body.snx-portal .snx-acct-nav .snx-svc-nav a[aria-current="page"] svg { color: var(--snx-link); }
.snx-acct-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; }
.snx-acct-narrow { max-width: 440px; }
/* Account verification (plugins/snapin/snxverify/verify.phtml): status pill at the end of the card head, and the
   reply to the last request under the buttons. */
.snx-verify .snx-db-card-head .snx-db-pill { margin-left: auto; }
.snx-verify-status { margin: 0; padding: 12px 20px; color: var(--snx-text-body); font-size: 0.86rem; }
.snx-verify-status:empty { display: none; }
/* A verified card ends with its note; the empty status line under it is hidden, so the note pads the bottom. */
.snx-verify .snx-verify-done { padding-bottom: 18px; }
.snx-verify-status[data-tone] { color: var(--t); font-weight: 600; }
body.snx-portal .snx-svc-state p.snx-verify-ordernote { margin-top: 2px; color: var(--snx-text-body); font-weight: 400; }
/* Checkout phone check for new customers (order_forms/partials/signuppublic/phoneverification.phtml). */
.snx-of-phone { max-width: 620px; margin: 8px auto 40px; }
body.snx-portal .snx-of-phone .snx-db-card-head h1 { margin: 0; color: var(--snx-text-dark); font: 700 1.05rem/1.25 var(--snx-font); }
/* Unsubscribe page of the mass mail snapin (plugins/snapin/snxmailer/optout.phtml), often opened signed out. */
.snx-optout { max-width: 560px; margin: 8px auto 40px; }
body.snx-portal .snx-optout .snx-db-card-head h1 { margin: 0; color: var(--snx-text-dark); font: 700 1.05rem/1.25 var(--snx-font); }
body.snx-portal .snx-acct .form-group > label { display: block; margin: 0 0 5px; font-size: 0.86rem; }
/* Stock .form-elem already spaces each field (padding-bottom); Bootstrap's form-group margin would double it. */
.snx-acct-fields .form-group { min-width: 0; margin-bottom: 0; }
body.snx-portal .snx-acct-fields .form-elem > label { display: block; margin: 0 0 5px; font-size: 0.84rem; }
.snx-acct-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; }
body.snx-portal .snx-acct-savebar p, body.snx-portal .snx-acct-footnote { margin: 0; color: var(--snx-text-muted); font-size: 0.84rem; }
.snx-acct-label { display: block; margin: 0 0 4px; color: var(--snx-text-dark); font-size: 0.82rem; font-weight: 600; }
.snx-acct-help { display: block; margin-top: 4px; color: var(--snx-text-muted); font-size: 0.78rem; }

/* Contacts */
body.snx-portal table.snx-bill-table .snx-acct-check { width: 1%; text-align: center; white-space: nowrap; }
.snx-acct-contacts td.snx-bill-primary .form-control { min-width: 220px; }
/* The list's 16px checkbox size would squash the switch. */
.snx-acct-contacts input.snx-svc-switch { width: 40px; height: 22px; vertical-align: middle; }
.snx-acct-remove { width: 18px; height: 18px; margin: 0; accent-color: var(--snx-bad); cursor: pointer; }
.snx-acct-contacts tr:has(.snx-acct-remove:checked) td.snx-bill-primary .form-control { color: var(--snx-text-muted); text-decoration: line-through; }
.snx-acct-contacts tr:has(.snx-acct-remove:checked) { background: var(--snx-bad-soft); }
.snx-acct-kinds { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Notes and email history (js/account.js) */
body.snx-portal .snx-acct-toggle { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; color: var(--snx-text-dark); font: inherit; text-align: left; cursor: pointer; }
.snx-acct-toggle b { font-weight: 700; overflow-wrap: anywhere; }
.snx-acct-toggle svg { flex-shrink: 0; margin-top: 2px; color: var(--snx-text-muted); transform: rotate(-90deg); transition: transform 0.15s ease; }
.snx-acct-toggle[aria-expanded="true"] svg { color: var(--snx-link); transform: none; }
body.snx-portal .snx-acct-toggle:hover b { color: var(--snx-link); text-decoration: underline; }
.snx-acct-list .snx-bill-primary .snx-bill-sub { padding-left: 24px; }
body.snx-portal table.snx-bill-table thead th.snx-acct-date, body.snx-portal table.snx-bill-table td.snx-acct-date { text-align: right; }
body.snx-portal table.snx-bill-table tbody tr.is-open td { background: var(--snx-card-subtle); border-bottom-color: transparent; }
body.snx-portal table.snx-bill-table tbody tr.snx-acct-detailrow > td { padding: 0 20px 18px 44px; background: var(--snx-card-subtle); text-align: left; }
body.snx-portal table.snx-bill-table tbody tr.snx-acct-detailrow:hover > td { background: var(--snx-card-subtle); }
.snx-acct-note { max-width: 76ch; color: var(--snx-text-body); font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.snx-acct-note.is-text { white-space: pre-line; }
body.snx-portal .snx-acct-note p { margin: 0 0 0.6em; color: inherit; }
.snx-acct-note img { max-width: 100%; height: auto; }
body.snx-portal .snx-acct-mailto { margin: 0 0 8px; color: var(--snx-text-muted); font-size: 0.8rem; }
/* The message is the sender's own document and assumes a light page, so its frame keeps light colours in both themes. */
.snx-acct-light {
  --snx-card: #ffffff;
  --snx-card-subtle: #faf7ff;
  --snx-line: #e7e0f4;
  --snx-text-dark: #190838;
  --snx-text-body: #4b3d63;
  color-scheme: light;
}
.snx-acct-mailframe { display: block; width: 100%; height: 240px; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-sm); background: var(--snx-card); color-scheme: light; }
.snx-acct-mail { min-width: 0; }
@container card (max-width: 760px) {
  body.snx-portal table.snx-bill-table tbody tr.snx-acct-detailrow { padding: 0 16px 14px; background: var(--snx-card-subtle); }
  body.snx-portal table.snx-bill-table tbody tr.snx-acct-detailrow > td { display: block; padding: 0; text-align: left; }
  body.snx-portal table.snx-bill-table tbody tr.snx-acct-detailrow > td::before { display: none; }
  body.snx-portal table.snx-bill-stack-760 tbody tr.is-open { background: var(--snx-card-subtle); border-bottom: 0; }
  .snx-acct-list .snx-bill-primary .snx-bill-sub { padding-left: 24px; }
  .snx-acct-contacts td.snx-bill-primary .form-control { min-width: 0; }
  body.snx-portal table.snx-bill-table .snx-acct-check { width: 100%; }
}

/* Two-factor */
.snx-acct-headpill { margin-left: auto; }
.snx-acct-steps { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 18px 20px 4px; list-style: none; counter-reset: snx-step; }
.snx-acct-steps > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 40px; counter-increment: snx-step; }
.snx-acct-steps > li::before { content: counter(snx-step); position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--snx-violet-soft); color: var(--snx-link); font-size: 0.8rem; font-weight: 800; }
body.snx-portal .snx-acct-steps b { color: var(--snx-text-dark); font-weight: 700; }
body.snx-portal .snx-acct-steps label { margin: 0; }
.snx-acct-2fa-msg { color: var(--snx-text-body); font-size: 0.88rem; overflow-wrap: anywhere; }
.snx-acct-qr { padding: 12px; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-md); background: var(--snx-card); line-height: 0; }
.snx-acct-qr img { width: 168px; height: 168px; image-rendering: pixelated; }
body.snx-portal .snx-acct-code { width: 11ch; max-width: 100%; font: 600 1.2rem/1.2 var(--snx-font-mono); letter-spacing: 0.2em; }
body.snx-portal .snx-acct-error { margin: 0; color: var(--snx-bad); font-size: 0.84rem; font-weight: 600; }

/* Payment method: the form card is .snx-bill-pay (light in both themes); these tones keep its alerts and badges readable there. */
.snx-acct-pay {
  --snx-violet-ink: #6d28d9; --snx-violet-line: #c4b5fd;
  --snx-ok: #065f46;      --snx-ok-soft: #ecfdf5;      --snx-ok-line: #6ee7b7;
  --snx-warn: #92400e;    --snx-warn-soft: #fffbeb;    --snx-warn-line: #fcd34d;
  --snx-bad: #991b1b;     --snx-bad-soft: #fef2f2;     --snx-bad-line: #fca5a5;
  --snx-info: #075985;    --snx-info-soft: #f0f9ff;    --snx-info-line: #bae6fd;
}
.snx-acct-pay .alert { margin: 0 0 14px; border-radius: var(--snx-radius-sm); font-size: 0.88rem; }
body.snx-portal .snx-acct-pay .alert p { margin: 0; color: inherit; }
.snx-acct-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-sm); background: var(--snx-card-subtle); }
body.snx-portal .snx-acct-profile p { margin: 0; color: var(--snx-text-body); font-size: 0.86rem; }
.snx-acct-gateway { margin: 0 0 14px; }
body.snx-portal .snx-acct-gateway-note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--snx-text-muted); font-size: 0.82rem; }
.snx-acct-gateway .PaymentIframe { display: block; width: 100%; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-sm); }
.snx-acct-ccgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; }
.snx-acct-ccgrid .form-elem { padding-bottom: 6px; }
.snx-acct-awaiting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.snx-acct-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.snx-acct-brand { display: inline-flex; padding: 3px 10px; border: 1px solid var(--snx-line); border-radius: 6px; background: var(--snx-card-subtle); color: var(--snx-text-dark); font-size: 0.76rem; font-weight: 700; }
.snx-acct-ccread { margin: 0 -20px; border-top: 1px solid var(--snx-hairline); }
.snx-acct-ccread dd > span:empty { display: none; }

/* One announcement (views/home/announcementspublic/announcement.phtml), in the list page's panel style. */
.snx-ann-single { display: flex; flex-direction: column; gap: 16px; }
.snx-ann-article { padding: 28px 32px 32px; }
.snx-ann-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--snx-hairline); }
body.snx-portal .snx-ann-single h1 { margin: 0; font: 800 clamp(1.45rem, 2.4vw, 1.9rem)/1.2 var(--snx-font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.snx-ann-body { max-width: 72ch; color: var(--snx-text-body); font-size: 0.98rem; line-height: 1.7; overflow-wrap: anywhere; }
body.snx-portal .snx-ann-body p { margin: 0 0 1em; color: inherit; }
.snx-ann-body ul, .snx-ann-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.snx-ann-body img, .snx-ann-body table { max-width: 100%; height: auto; }
.snx-ann-body > :last-child { margin-bottom: 0; }
.snx-ann-pager { display: flex; flex-wrap: wrap; gap: 12px; }
body.snx-portal .snx-ann-step { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--snx-border); border-radius: 9999px; background: var(--snx-card); color: var(--snx-text-dark); font-size: 0.88rem; font-weight: 700; text-decoration: none; box-shadow: var(--snx-shadow); }
body.snx-portal .snx-ann-step:hover { border-color: var(--snx-violet); color: var(--snx-link); }
.snx-ann-step--prev svg { transform: scaleX(-1); }
.snx-ann-step--next { margin-left: auto; }
@media (max-width: 600px) {
  .snx-ann-article { padding: 22px 18px 24px; }
}

@container snx-svc (max-width: 900px) {
  /* On one column the page's own cards come first (the user menu and sidebar already lead here) and the Account
     card follows, its links sharing rows instead of a tall list. */
  .snx-acct .snx-svc-cols > .snx-db-stack:last-child { order: 0; }
  .snx-acct-nav .snx-svc-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px; }
}
@container card (max-width: 520px) {
  .snx-acct-ccgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .snx-acct-toggle svg { transition: none; }
}


/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Sign-in and affiliates (Aurora): views/home/indexpublic auth views, views/affiliates */
/* ------------------------------------------------------------------ */

/* Signed-out pages (lib/access_frame.php): the form card beside a brand panel that is dark in both themes. */
.snx-acc { container: snx-acc / inline-size; padding-top: 8px; }
.snx-acc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--snx-border);
  border-radius: var(--snx-radius-lg);
  background: var(--snx-card);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--snx-purple) 10%, transparent);
}
.snx-acc-shell--wide { max-width: 1160px; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.snx-acc-panel { container: snx-acc-panel / inline-size; min-width: 0; padding: 36px 40px 32px; }
.snx-acc-head { margin-bottom: 24px; }
.snx-acc-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--snx-violet-soft); color: var(--snx-link); }
body.snx-portal .snx-acc-head h1 { margin: 0; color: var(--snx-text-dark); font: 800 clamp(1.5rem, 2.4vw, 1.85rem)/1.15 var(--snx-font-display); letter-spacing: -0.02em; }
body.snx-portal .snx-acc-lead { margin: 6px 0 0; color: var(--snx-text-muted); font-size: 0.95rem; }

/* Fields. The forms stack with a gap, so ClientExec's appended sessionHash input (display: none) adds no space. */
.snx-acc-form { display: flex; flex-direction: column; gap: 18px; }
.snx-acc-fieldrow, .snx-acc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.snx-portal .snx-acc label { margin: 0; color: var(--snx-text-dark); font-size: 0.86rem; font-weight: 600; }
body.snx-portal .snx-acc label .required { color: var(--snx-bad); }
body.snx-portal .snx-acc-forgot { margin: 0; text-align: center; font-size: 0.88rem; }
body.snx-portal .snx-acc-forgot a { font-weight: 700; text-decoration: none; }
body.snx-portal .snx-acc-forgot a:hover { text-decoration: underline; }
body.snx-portal .snx-acc .form-control { height: 46px; padding: 0 14px; font-size: 0.95rem; }
body.snx-portal .snx-acc select.form-control { padding-right: 32px; }
body.snx-portal .snx-acc .form-control.parsley-error { border-color: var(--snx-bad); background-color: var(--snx-card); color: var(--snx-text-dark); }
.snx-acc-error:not(:has(li)) { display: none; }
body.snx-portal .snx-acc .parsley-errors-list { margin: 0; padding: 0; color: var(--snx-bad); font-size: 0.82rem; font-weight: 600; line-height: 1.4; list-style: none; }
.snx-acc-pass { position: relative; }
body.snx-portal .snx-acc-pass .form-control { padding-right: 50px; }
.snx-acc-reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--snx-radius-sm);
  background: transparent;
  color: var(--snx-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.snx-acc-reveal:hover { background: var(--snx-tint); color: var(--snx-text-dark); }
.snx-acc-reveal[hidden], .snx-acc-reveal .snx-ico + .snx-ico, .snx-acc-reveal[aria-pressed="true"] .snx-ico:first-child { display: none; }
.snx-acc-reveal[aria-pressed="true"] .snx-ico + .snx-ico { display: block; }
body.snx-portal .snx-acc-check { display: flex; align-items: flex-start; gap: 10px; color: var(--snx-text-body); font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.snx-acc-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--snx-purple); }
body.snx-portal .snx-acc-check a { font-weight: 700; }
body.snx-portal .snx-acc-submit { width: 100%; padding: 13px 20px; font-size: 0.95rem; }
.snx-acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
body.snx-portal .snx-acc-actions .snx-acc-submit { width: auto; }
body.snx-portal .snx-acc-muted { margin: 0; color: var(--snx-text-muted); font-size: 0.85rem; }
/* Captcha widgets paint a light box of their own; in dark mode they keep a light surface behind them. */
.snx-acc-captcha {
  --snx-card: #ffffff;
  --snx-text-dark: #190838;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--snx-card);
  color: var(--snx-text-dark);
  color-scheme: light;
}
.snx-acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.snx-acc-fieldcol { min-width: 0; }
.snx-acc-break { grid-column: 1 / -1; }

body.snx-portal .snx-acc-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--snx-violet-line); border-radius: var(--snx-radius-sm); background: var(--snx-violet-soft); color: var(--snx-text-dark); font-size: 0.88rem; font-weight: 600; }
body.snx-portal .snx-acc-form .snx-acc-note { margin: 0; }
body.snx-portal .snx-acc-note[data-tone="bad"] { border-color: var(--snx-bad-line); background: var(--snx-bad-soft); color: var(--snx-bad); }
body.snx-portal .snx-acc-note[hidden], .snx-acc-done[hidden], .snx-acc-form[hidden] { display: none; }
.snx-acc-note .snx-ico { flex-shrink: 0; margin-top: 1px; }
.snx-acc-done { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--snx-ok-line); border-radius: var(--snx-radius-md); background: var(--snx-ok-soft); }
.snx-acc-done:focus { outline: none; }
body.snx-portal .snx-acc-done p { margin: 0; color: var(--snx-text-dark); }
body.snx-portal .snx-acc-done .snx-acc-muted { color: var(--snx-text-body); }
body.snx-portal .snx-acc-done .snx-acc-done-title { display: flex; align-items: center; gap: 8px; color: var(--snx-ok); font-weight: 700; }
.snx-acc-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--snx-hairline); text-align: center; }
body.snx-portal .snx-acc-foot p { margin: 0; color: var(--snx-text-muted); font-size: 0.9rem; }
body.snx-portal .snx-acc-foot a { font-weight: 700; }

/* Two-factor code boxes (stock's .twofactor-code-inputs, restyled): they share the row and shrink on phones. */
.snx-acc-digits { display: flex; gap: 10px; }
body.snx-portal .snx-acc-digits .twofactor-digit { flex: 1 1 0; min-width: 0; max-width: 58px; height: 60px; padding: 0; font: 700 1.5rem/1 var(--snx-font-mono); text-align: center; }

/* Brand panel: the dashboard welcome banner's surface, dark in both themes. */
.snx-acc-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 36px 32px 28px;
  color: #d9ccf5;
  background: radial-gradient(130% 80% at 100% 0%, #6d28d9 0%, transparent 60%),
              radial-gradient(120% 70% at 0% 100%, rgba(56, 189, 248, 0.45) 0%, transparent 58%),
              #12052b;
}
.snx-acc-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
}
body.snx-portal .snx-acc-brand :focus-visible { outline-color: var(--snx-cyan); }
body.snx-portal .snx-acc-eyebrow { margin: 0; color: #c4b5fd; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.snx-portal .snx-acc-pitch { margin: 0; color: #fff; font: 800 1.45rem/1.25 var(--snx-font-display); letter-spacing: -0.015em; }
.snx-acc-points { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.snx-acc-points li { display: flex; align-items: center; gap: 12px; color: #ece3ff; font-size: 0.9rem; font-weight: 500; }
.snx-acc-point-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.snx-acc-help { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.84rem; }
body.snx-portal .snx-acc-help p { margin: 0 0 2px; color: #d9ccf5; }
body.snx-portal .snx-acc-help a { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.snx-acc-help a .snx-ico { flex-shrink: 0; color: #c4b5fd; }
body.snx-portal .snx-acc-help a:hover { color: #fff; text-decoration: underline; }

/* The sign-up form needs the width for two field columns more than it needs the brand panel beside it. */
@container snx-acc (max-width: 1000px) {
  .snx-acc-shell--wide { grid-template-columns: minmax(0, 1fr); }
  .snx-acc-shell--wide .snx-acc-points { display: none; }
}
@container snx-acc (max-width: 760px) {
  .snx-acc-shell { grid-template-columns: minmax(0, 1fr); }
  .snx-acc-panel { padding: 28px 24px 24px; }
  .snx-acc-brand { padding: 24px; }
  .snx-acc-points { display: none; }
  body.snx-portal .snx-acc-pitch { font-size: 1.15rem; }
}
@container snx-acc (max-width: 420px) {
  .snx-acc-panel { padding: 24px 16px 20px; }
  .snx-acc-brand { padding: 22px 16px; }
}
@container snx-acc-panel (max-width: 540px) {
  .snx-acc-grid { grid-template-columns: minmax(0, 1fr); }
}
@container snx-acc-panel (max-width: 340px) {
  .snx-acc-digits { gap: 6px; }
  body.snx-portal .snx-acc-digits .twofactor-digit { height: 50px; font-size: 1.2rem; }
}

/* Affiliates (views/affiliates/affiliatepublic): billing's page head, balance band, figures and list. */
.snx-bill-pagehead > .snx-aff-tabs { margin-left: auto; }
.snx-aff-head { align-items: end; }
body.snx-portal .snx-aff-head .snx-bill-eyebrow { margin: 0; font-family: var(--snx-font); line-height: 1.4; }
body.snx-portal .snx-aff-head .snx-bill-amount { margin: 6px 0 0; }
.snx-aff-head-action { display: flex; align-items: flex-end; justify-content: flex-end; }
body.snx-portal .snx-aff-head-note { max-width: 280px; margin: 0; color: #d9ccf5; font-size: 0.86rem; text-align: right; }
body.snx-portal .snx-aff-head .snx-db-btn-light { border: 0; cursor: pointer; }
body.snx-portal .snx-aff-head .snx-db-btn-light:disabled { opacity: 0.75; cursor: default; }
.snx-aff-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.snx-aff-link { display: flex; gap: 10px; padding: 18px 20px 0; }
body.snx-portal .snx-aff-url { height: 42px; font-family: var(--snx-font-mono); font-size: 0.86rem; }
body.snx-portal .snx-aff-url[readonly] { background-color: var(--snx-card-subtle); color: var(--snx-text-dark); }
body.snx-portal .snx-aff-copied { margin: 0; padding: 6px 20px 0; color: var(--snx-ok); font-size: 0.82rem; font-weight: 600; }
.snx-aff-cardnote { padding-bottom: 18px; }
body.snx-portal .snx-aff .snx-db-card-foot a { font-weight: 700; }

.snx-aff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 20px; list-style: none; }
.snx-aff-steps li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px; border: 1px solid var(--snx-line); border-radius: var(--snx-radius-md); background: var(--snx-card-subtle); }
.snx-aff-step-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 11px; background: linear-gradient(135deg, var(--snx-purple), var(--snx-cyan)); color: #fff; }
.snx-aff-step-n { color: var(--snx-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.snx-aff-steps b { color: var(--snx-text-dark); font-size: 1rem; font-weight: 700; }
.snx-aff-steps li > span:last-child { color: var(--snx-text-body); font-size: 0.88rem; line-height: 1.5; }
body.snx-portal .snx-aff-bonus { display: flex; align-items: center; gap: 10px; margin: 0 20px 4px; padding: 12px 14px; border-radius: var(--snx-radius-sm); background: var(--t-soft); color: var(--t); font-weight: 600; }
.snx-aff-bonus .snx-ico { flex-shrink: 0; }

@container snx-bill (max-width: 900px) {
  .snx-aff-cols { grid-template-columns: minmax(0, 1fr); }
}
@container snx-bill (max-width: 760px) {
  .snx-bill-pagehead > .snx-aff-tabs { margin-left: 0; }
  .snx-aff-head-action { justify-content: flex-start; }
  body.snx-portal .snx-aff-head-note { text-align: left; }
}
@container card (max-width: 700px) {
  .snx-aff-steps { grid-template-columns: minmax(0, 1fr); }
}
@container card (max-width: 420px) {
  .snx-aff-link { flex-wrap: wrap; }
  .snx-aff-link .snx-bill-btn { width: 100%; }
}


/* ------------------------------------------------------------------ */
/* Portal home (index.php)                                             */
/* ------------------------------------------------------------------ */

.snx-home-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 36px;
  border-radius: var(--snx-radius-lg);
  background: radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.3), transparent 45%),
              radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.5), transparent 55%),
              #120533;
  color: #d8ccf5;
}
body.snx-portal .snx-home-hero h1 { margin: 0 0 8px; color: #fff; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.snx-home-hero h1 span { background: var(--snx-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Stock sets p { color: #858b9a; font-size: 14px }, too faint on the dark band. */
body.snx-portal .snx-home-lede { max-width: 560px; margin: 0 0 22px; color: #d8ccf5; font-size: 1rem; }
.snx-home-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--snx-input-border);
  border-radius: 9999px;
  background: var(--snx-card);
  color: var(--snx-text-muted);
  box-shadow: 0 10px 30px rgba(25, 8, 56, 0.2);
}
.snx-home-search:focus-within { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35), 0 10px 30px rgba(25, 8, 56, 0.2); }
.snx-home-search input[type="text"] { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--snx-text-dark); font: 500 1rem var(--snx-font); }
body.snx-portal .snx-home-hint { margin: 10px 0 0; color: #c4b5fd; font-size: 0.8rem; }

.snx-home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
body.snx-portal .snx-home-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--snx-border);
  border-radius: 16px;
  background: var(--snx-card);
  color: var(--snx-text-body);
  text-decoration: none;
  box-shadow: var(--snx-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.snx-portal .snx-home-tile:hover { transform: translateY(-2px); border-color: var(--snx-violet); box-shadow: 0 12px 30px rgba(147, 51, 234, 0.12); color: var(--snx-text-body); }
.snx-home-tile strong { color: var(--snx-text-dark); font-size: 1rem; }
.snx-home-tile-text { color: var(--snx-text-muted); font-size: 0.86rem; line-height: 1.45; }
.snx-home-tile-cta { margin-top: auto; color: var(--snx-link); font-size: 0.84rem; font-weight: 700; }
.snx-home-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(56, 189, 248, 0.14));
  color: var(--snx-link);
}

.snx-home-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.snx-home-cols--single { grid-template-columns: minmax(0, 1fr); }
.snx-home-feed { display: flex; flex-direction: column; gap: 16px; }
.snx-home-panel { padding: 22px 24px; border: 1px solid var(--snx-border); border-radius: 16px; background: var(--snx-card); box-shadow: var(--snx-shadow); }
.snx-home-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.snx-portal .snx-home-panel-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
body.snx-portal .snx-home-panel-head a { font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.snx-home-ann { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--snx-hairline); }
.snx-home-ann:first-of-type { padding-top: 0; border-top: 0; }
.snx-home-ann h3, .snx-home-ann p { grid-column: 2; }
.snx-home-date { grid-row: 1 / span 2; align-self: start; padding: 2px 10px; border-radius: 9999px; background: var(--snx-tint); color: var(--snx-link); font: 500 0.72rem var(--snx-font-mono); white-space: nowrap; }
body.snx-portal .snx-home-ann h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }
body.snx-portal .snx-home-ann h3 a { color: var(--snx-text-dark); text-decoration: none; }
body.snx-portal .snx-home-ann h3 a:hover { color: var(--snx-link); }
.snx-home-ann p { margin: 0; color: var(--snx-text-muted); font-size: 0.88rem; line-height: 1.55; }
/* Announcements list (views/home/announcementspublic/announcements.phtml) reuses the home feed rows. */
body.snx-portal .snx-ann-page h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
body.snx-portal .snx-ann-page .snx-home-ann h2 { grid-column: 2; margin: 0; font-size: 0.98rem; font-weight: 700; }
body.snx-portal .snx-ann-page .snx-home-ann h2 a { color: var(--snx-text-dark); text-decoration: none; }
body.snx-portal .snx-ann-page .snx-home-ann h2 a:hover { color: var(--snx-link); }
body.snx-portal .snx-ann-page .snx-home-ann p { grid-column: 2; }
/* display: grid/flex would otherwise beat the UA [hidden] rule. */
.snx-ann-page [hidden] { display: none; }
.snx-ann-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--snx-hairline); }
body.snx-portal .snx-ann-count { margin: 0; color: var(--snx-text-muted); font-size: 0.8rem; }
.snx-home-contact ul { list-style: none; margin: 0; padding: 0; }
.snx-home-contact li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--snx-hairline); }
.snx-home-contact li:first-child { padding-top: 0; border-top: 0; }
.snx-home-contact small { display: block; color: var(--snx-text-muted); font-size: 0.76rem; }
body.snx-portal .snx-home-contact a { color: var(--snx-text-dark); font-weight: 700; text-decoration: none; }
body.snx-portal .snx-home-contact a:hover { color: var(--snx-link); }

@media (max-width: 1200px) {
  .snx-home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snx-home-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .snx-home-hero { padding: 24px 18px; }
  body.snx-portal .snx-home-hero h1 { font-size: 1.7rem; }
  .snx-home-hint { display: none; }
  .snx-home-tiles { grid-template-columns: minmax(0, 1fr); }
  /* A side date column leaves titles a third of a phone's width; stack the date above instead. */
  .snx-home-ann { grid-template-columns: minmax(0, 1fr); }
  .snx-home-date { grid-row: auto; justify-self: start; }
  .snx-home-ann h3, .snx-home-ann p, body.snx-portal .snx-ann-page .snx-home-ann h2, body.snx-portal .snx-ann-page .snx-home-ann p { grid-column: 1; }
}

/* ------------------------------------------------------------------ */
/* Stock list pages (invoices, tickets, services, domains)             */
/* ------------------------------------------------------------------ */

body.snx-portal .datatable-page,
body.snx-portal .content-page { padding-top: 8px; }
body.snx-portal .datatable-page .cm-holder,
body.snx-portal .content-page .cm-holder {
  border: 1px solid var(--snx-border);
  border-radius: var(--snx-radius-lg);
  background: var(--snx-card-subtle);
  box-shadow: var(--snx-shadow);
  overflow: visible;
}
body.snx-portal .data-table-wrapper { border: 0; background: transparent; box-shadow: none; }
body.snx-portal .data-table-wrapper table.dataTable,
body.snx-portal .data-table-wrapper table.dataTable.no-footer { border: 0; }
/* The stock grey title band becomes the site's section heading. */
body.snx-portal .data-table-wrapper .head {
  padding: 22px 24px 8px;
  border: 0;
  border-radius: var(--snx-radius-lg) var(--snx-radius-lg) 0 0;
  background: transparent;
}
body.snx-portal .data-table-wrapper .head h1,
body.snx-portal .data-table-wrapper .head h2,
body.snx-portal .data-table-wrapper .head h3 {
  color: var(--snx-text-dark);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.snx-portal .datatable-page .data-table-wrapper > table,
body.snx-portal .datatable-page .data-table-wrapper .dataTables_wrapper table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}
body.snx-portal .datatable-page .data-table-wrapper table thead th,
body.snx-portal .datatable-page .data-table-wrapper table tr th {
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid var(--snx-line);
  background: transparent;
  color: var(--snx-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.snx-portal .datatable-page .dataTables_wrapper { padding: 0 24px 20px; }
body.snx-portal .datatable-page .data-table-wrapper table tr td .product-name,
body.snx-portal .datatable-page .data-table-wrapper table tr td a { font-weight: 700; }
/* Only the row's title link takes the status colour; action menus and buttons keep their own. */
body.snx-portal .datatable-page .snx-row[data-status] > td:first-child a { color: color-mix(in srgb, var(--st) 75%, var(--snx-text-dark)); }
body.snx-portal .dataTables_wrapper .dataTables_filter input,
body.snx-portal .dataTables_wrapper .dataTables_length select { border: 1px solid var(--snx-input-border); border-radius: var(--snx-radius-sm); }
body.snx-portal .dataTables_wrapper .dataTables_info { color: var(--snx-text-muted); font-size: 0.82rem; }
body.snx-portal .page-item.active .page-link,
body.snx-portal .dataTables_wrapper .paginate_button.current { background: var(--snx-purple) !important; border-color: var(--snx-purple) !important; color: #fff !important; }
body.snx-portal .page-link { color: var(--snx-link); border-radius: 8px; margin: 0 2px; }
/* Stock list filters (Open / All / Paid ...) */
body.snx-portal .data-table-wrapper .head .nav-link,
body.snx-portal .data-table-wrapper .head .filter a { color: var(--snx-text-body); font-weight: 600; }
body.snx-portal .data-table-wrapper .head .nav-link.active,
body.snx-portal .data-table-wrapper .head .filter a.active { color: var(--snx-link); }

/* Service action menu (cog), carried over from the earlier portal design. */
body.snx-portal .data-table-wrapper table tr td .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--snx-line);
  border-radius: 8px;
  background: var(--snx-card);
  color: var(--snx-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.snx-portal .data-table-wrapper table tr td .action:hover,
body.snx-portal .data-table-wrapper table tr td .action.active {
  background: var(--snx-tint);
  border-color: var(--snx-violet);
  color: var(--snx-link);
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.2);
}
body.snx-portal .data-table-wrapper table tr td .action i { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.snx-portal .data-table-wrapper table tr td .action:hover i,
body.snx-portal .data-table-wrapper table tr td .action.active i { transform: rotate(90deg); }
body.snx-portal .data-table-wrapper table tr td .cog-drop-down {
  min-width: 190px;
  padding: 6px 0;
  border: 1px solid var(--snx-line);
  border-radius: 10px;
  background: var(--snx-card);
  box-shadow: 0 12px 28px -4px rgba(25, 8, 56, 0.16), 0 4px 8px -2px rgba(25, 8, 56, 0.06);
  z-index: 1050;
}
body.snx-portal .data-table-wrapper table tr td .cog-drop-down li { border-top: 1px solid var(--snx-hairline); }
body.snx-portal .data-table-wrapper table tr td .cog-drop-down li:first-child { border-top: 0; }
body.snx-portal .data-table-wrapper table tr td .cog-drop-down li a {
  padding: 9px 16px;
  color: var(--snx-text-body);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
body.snx-portal .data-table-wrapper table tr td .cog-drop-down li a:hover { background: var(--snx-card-subtle); color: var(--snx-link); padding-left: 19px; }

/* ------------------------------------------------------------------ */
/* Forms and detail pages (login, register, profile, tickets, invoices) */
/* ------------------------------------------------------------------ */

body.snx-portal .cs-padding { background: var(--snx-card); border-radius: 0 0 var(--snx-radius-lg) var(--snx-radius-lg); }
body.snx-portal .content-page .data-table-wrapper .head { border-bottom: 1px solid var(--snx-border); padding-bottom: 18px; }
body.snx-portal .input-group-text { background: var(--snx-card-subtle); border-color: var(--snx-input-border); color: var(--snx-link); }
body.snx-portal label, body.snx-portal .col-form-label { color: var(--snx-text-dark); font-weight: 600; }
body.snx-portal .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--snx-purple); border-color: var(--snx-purple); }
body.snx-portal .cm-btns.orange,
body.snx-portal .app-btns.orange { background: var(--snx-aurora); border: 0; color: #fff; border-radius: 9999px; }
body.snx-portal .cm-tab-accordion .resp-tabs-list li.resp-tab-active,
body.snx-portal .cm-tab-accordion .resp-tabs-list li.resp-tab-active span { color: var(--snx-link); border-color: var(--snx-purple); }
body.snx-portal .ticket-tab-reply-block .ticket-tab-reply-head h3 { color: var(--snx-text-dark); }
body.snx-portal .ticket-tab-reply-block .ticket-tab-reply-head .close-ticket,
body.snx-portal .ticket-tab-reply-block .ticket-tab-reply-bottom a,
body.snx-portal .ticket-avatar-ul li span { color: var(--snx-link); }
body.snx-portal .alert-info { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }

/* Bootstrap's primary blue (#007bff) still drives several stock utilities; map it to the brand. */
body.snx-portal .text-primary { color: var(--snx-link) !important; }
body.snx-portal .bg-primary, body.snx-portal .badge-primary { background-color: var(--snx-purple) !important; }
body.snx-portal .border-primary { border-color: var(--snx-purple) !important; }
body.snx-portal .btn-link { color: var(--snx-link); }
body.snx-portal .btn-outline-primary { color: var(--snx-link); border-color: var(--snx-purple); }
body.snx-portal .btn-outline-primary:hover { background: var(--snx-purple); color: #fff; }
body.snx-portal .dropdown-item.active, body.snx-portal .dropdown-item:active,
body.snx-portal .nav-pills .nav-link.active, body.snx-portal .list-group-item.active { background-color: var(--snx-purple); border-color: var(--snx-purple); }
body.snx-portal .progress-bar { background: var(--snx-aurora); }

/* The hover lift (transform) makes each row its own stacking context, so an open cog menu would sit
   under the following rows. Raise the row being used above its siblings. */
body.snx-portal tr.snx-row { position: relative; }
body.snx-portal tr.snx-row:hover,
body.snx-portal tr.snx-row:focus-within,
body.snx-portal tr.snx-row:has(.cog-drop-down.pull-it) { z-index: 5; }

/* "#12" service identifiers split out of stock package names (see sheernox.js). */
.snx-row-id {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 9999px;
  background: rgba(147, 51, 234, 0.08);
  color: var(--snx-text-muted);
  font: 600 0.74rem var(--snx-font-mono);
  vertical-align: 1px;
}

/* List page controls: filter tabs, search, bulk actions */
body.snx-portal .datatable-page .btn-group {
  padding: 4px;
  gap: 2px;
  border-radius: 9999px;
  background: var(--snx-tint);
  border: 1px solid var(--snx-border);
}
/* Stock styles these as #filter-ul .btn, so the overrides need the id too. */
body.snx-portal #filter-ul .btn,
body.snx-portal .datatable-page .btn-group > .btn {
  border: 0;
  border-radius: 9999px !important;
  background: transparent;
  color: var(--snx-text-body);
  font-weight: 700;
  box-shadow: none;
}
body.snx-portal #filter-ul .btn:hover,
body.snx-portal .datatable-page .btn-group > .btn:hover { color: var(--snx-link); }
body.snx-portal #filter-ul .btn.btn-primary,
body.snx-portal .datatable-page .btn-group > .btn.btn-primary { background: var(--snx-aurora); color: #fff; }
body.snx-portal .datatable-page .btn { white-space: nowrap; }
body.snx-portal .datatable-page .product-list-table tr.snx-row > td:first-child { min-width: 220px; }
body.snx-portal .datatable-page table tr.snx-row > td:first-child a { text-decoration: none; }
body.snx-portal .datatable-page table tr.snx-row > td:first-child a:hover { text-decoration: underline; }

/* With the portal sidebar docked the work area is only about 750-1140px wide, yet list tables lose 70px a side to
   stacked gutters (.cs-padding plus the DataTables wrapper) and stock gives every cell a 120px minimum, so five
   columns need ~740px before any content and push the page sideways. Tighten instead of scrolling: a scroll container
   would clip the cog menus. */
@media (max-width: 1399.98px) {
  body.snx-portal .datatable-page .table-responsive.cs-padding { padding-left: 0; padding-right: 0; }
  body.snx-portal .data-table-wrapper table.dataTable tr > td { padding-left: 12px; padding-right: 12px; }
  body.snx-portal .data-table-wrapper table.dataTable thead th { padding-left: 12px; white-space: nowrap; }
}
/* Phones already scroll the table inside its card, so they keep the stock minimums rather than squeezing names. */
@media (min-width: 769px) and (max-width: 1399.98px) {
  body.snx-portal .data-table-wrapper table.dataTable tr > td { min-width: 0; }
  /* Long unbroken names (domains) must not set the table's minimum width. */
  body.snx-portal .data-table-wrapper table.dataTable tr > td:first-child { overflow-wrap: anywhere; }
  /* Without the stock minimum, ISO dates would break at their hyphens and amounts before their currency code. */
  body.snx-portal .data-table-wrapper table .due-date,
  body.snx-portal .data-table-wrapper table .snx-row-date,
  body.snx-portal .data-table-wrapper table .snx-row-amount { white-space: nowrap; }
}

/* ------------------------------------------------------------------ */
/* Remaining stock blues (#1e6bca, #2b7dda, #5d8cd3, #d9e9fa)          */
/* ------------------------------------------------------------------ */

body.snx-portal .upgrade-downgrade-third .table tr td .amount-span { color: var(--snx-link); }

/* Affiliate and package side bars */
body.snx-portal .package-view-page .package-side-bar li a:hover,
body.snx-portal .package-view-page .package-side-bar li a.active span,
body.snx-portal .affiliate-system-page .affiliate-side-bar li a:hover,
body.snx-portal .affiliate-system-page .affiliate-side-bar li a.active,
body.snx-portal .affiliate-system-page .affiliate-side-bar li a.active span,
body.snx-portal .domain-page .domain-section .resp-tabs-container h2.resp-accordion.resp-tab-active,
body.snx-portal .config-options .resp-tabs-list .resp-tab-active .tab-heading,
body.snx-portal .submit-ticket h6 { color: var(--snx-link); }
body.snx-portal .domain-page .domain-section .resp-tabs-list .resp-tab-item.resp-tab-active { color: var(--snx-link); box-shadow: 0 3px 0 0 var(--snx-purple); }
body.snx-portal .affiliate-system-page .affiliate-status-block .affiliate-boxes .affiliate-single-box h4 .commen-rou,
body.snx-portal .submit-ticket a { background: var(--snx-purple); }

/* Outline actions (DNS submit, cancel) */
body.snx-portal .dns-records-box-ul > li .dns-records-submit,
body.snx-portal .cancel-submit-btns .cancel-btn {
  border-color: var(--snx-purple);
  color: var(--snx-link);
  border-radius: 9999px;
}
body.snx-portal .dns-records-box-ul > li .dns-records-submit:hover,
body.snx-portal .cancel-submit-btns .cancel-btn:hover { background: var(--snx-purple); color: #fff; }

/* Service page action sidebar. Below 1200px stock turns it into a fixed drawer parked at left: -235px with
   its toggle on the drawer's right edge, which would sit on top of the portal sidebar. */
body.snx-portal .sidebar .actions-header { background: var(--snx-tint); }
body.snx-portal .sidebar .actions-header .font-actions,
body.snx-portal .sidebar ul li a { color: var(--snx-link); }
body.snx-portal .sidebar ul li a:hover,
body.snx-portal .sidebar ul li.active a { background-color: var(--snx-tint); }
body.snx-portal .sidebar .sidenav ul.actions { border-color: var(--snx-line); }
@media (max-width: 1200px) {
  body.snx-portal .sidebar { padding-top: 24px; }
  body.snx-portal .sidebar-toggle {
    top: calc(var(--snx-top-h) + 20px); /* clear of the sticky top bar */
    border-radius: 0 10px 10px 0;
    background: var(--snx-aurora);
    box-shadow: 0 6px 16px rgba(147, 51, 234, 0.3);
  }
}
/* While the portal sidebar is docked, park the stock drawer behind it and open it beside it. */
@media (min-width: 1025px) and (max-width: 1200px) {
  body.snx-portal .sidebar { left: calc(var(--snx-side-w) - 235px); }
  body.snx-portal .sidebar:not(.sidebarshow) { box-shadow: none; }
  body.snx-portal .sidebar.sidebarshow { left: var(--snx-side-w); }
}

/* Stock busy mask (clientexec.mask, z-index 1001) must also cover the portal sidebar (1010). */
body.snx-portal #ce-overlay { z-index: 1020; }

/* Printing an invoice or ticket should not repeat the portal chrome on every sheet. */
@media print {
  .snx-network, .snx-side, .snx-scrim, .snx-top, .snx-foot, .snx-skip-link, .sidebar-toggle { display: none !important; }
  .snx-shell { display: block; }
  body.snx-portal { background: #fff; color: #4b3d63; }
}

/* ------------------------------------------------------------------ */
/* Dark mode                                                           */
/* ------------------------------------------------------------------ */

/* html[data-snx-theme="dark"] is set before first paint from the client's stored choice (light is the default).
   It only takes effect on body.snx-dark-ok, the pages the redesign already owns (lib/dark_ready.php), so a stock
   view is never half dark. Screen only: printing always uses the light tokens. A softer violet-slate, not black. */
@media screen {
  html[data-snx-theme="dark"] body.snx-dark-ok {
    color-scheme: dark;
    --snx-side-bg: #0f0a22;
    --snx-canvas: #17122b;
    --snx-card: #201a38;
    --snx-card-subtle: #241d3f;
    --snx-border: rgba(196, 170, 255, 0.16);
    --snx-hairline: rgba(196, 170, 255, 0.1);
    --snx-line: rgba(196, 170, 255, 0.18);
    --snx-input-border: rgba(196, 170, 255, 0.3);
    --snx-tint: #2c2449;
    --snx-glass: rgba(23, 18, 43, 0.82);
    --snx-glow: rgba(168, 85, 247, 0.18);
    --snx-text-dark: #f2edfc;
    --snx-text-body: #cfc5e6;
    --snx-text-muted: #a99dc6;
    --snx-link: #d0a9fc;
    --snx-link-hover: #e9d5ff;
    --snx-focus: #c4b5fd;
    --snx-shadow: 0 4px 20px rgba(5, 2, 14, 0.35);
    --snx-ok: #6ee7b7;      --snx-ok-soft: rgba(52, 211, 153, 0.12);   --snx-ok-line: rgba(52, 211, 153, 0.35);
    --snx-warn: #fcd34d;    --snx-warn-soft: rgba(251, 191, 36, 0.12); --snx-warn-line: rgba(251, 191, 36, 0.35);
    --snx-bad: #fca5a5;     --snx-bad-soft: rgba(248, 113, 113, 0.13); --snx-bad-line: rgba(248, 113, 113, 0.38);
    --snx-info: #7dd3fc;    --snx-info-soft: rgba(56, 189, 248, 0.12); --snx-info-line: rgba(56, 189, 248, 0.35);
    --snx-neutral: #cbd5e1; --snx-neutral-soft: rgba(203, 213, 225, 0.1); --snx-neutral-line: rgba(203, 213, 225, 0.28);
    --snx-violet-ink: #d8b4fe; --snx-violet-soft: rgba(168, 85, 247, 0.14); --snx-violet-line: rgba(196, 170, 255, 0.35);
    --snx-cyan-ink: #67e8f9;   --snx-cyan-soft: rgba(34, 211, 238, 0.12);  --snx-cyan-line: rgba(34, 211, 238, 0.35);
    --snx-pink-ink: #f9a8d4;   --snx-pink-soft: rgba(236, 72, 153, 0.13); --snx-pink-line: rgba(236, 72, 153, 0.35);
    --snx-orange-ink: #fdba74; --snx-orange-soft: rgba(249, 115, 22, 0.13); --snx-orange-line: rgba(249, 115, 22, 0.38);
  }

  /* Stock Bootstrap and ClientExec components the redesigned pages still use. :where() keeps the dark switch out of
     the specificity, so these rules weigh the same as the light ones above. */
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok p { color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .text-dark,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .text-body { color: var(--snx-text-dark) !important; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .text-muted,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .text-secondary { color: var(--snx-text-muted) !important; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .bg-white,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .bg-light { background-color: var(--snx-card) !important; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .border,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .border-top,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .border-bottom { border-color: var(--snx-line) !important; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok hr { border-color: var(--snx-line); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .form-control,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .custom-select,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .custom-file-label {
    background-color: #1a1430;
    border-color: var(--snx-input-border);
    color: var(--snx-text-dark);
  }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .form-control::placeholder { color: var(--snx-text-muted); opacity: 1; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .form-control:disabled,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .form-control[readonly] { background-color: var(--snx-tint); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .input-group-text { color: var(--snx-link); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .custom-control-label::before { background-color: #1a1430; border-color: var(--snx-input-border); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table { color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table th,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table td,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table thead th { border-color: var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .table-hover tbody tr:hover { background-color: var(--snx-tint); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dataTables_wrapper label { color: var(--snx-text-body); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .card-header,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .card-footer { background-color: var(--snx-card-subtle); border-color: var(--snx-line); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .cm-holder,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .white-card { background-color: var(--snx-card); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .list-group-item { background-color: var(--snx-card); border-color: var(--snx-line); color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .list-group-item-action:hover { background-color: var(--snx-tint); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .list-group-item.active { color: #fff; }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-menu { background-color: var(--snx-card); border-color: var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-item { color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-item:hover,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-item:focus { background-color: var(--snx-tint); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-item.active { color: #fff; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .dropdown-divider { border-top-color: var(--snx-line); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .modal-content,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .popover { background-color: var(--snx-card); border-color: var(--snx-line); color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .modal-header,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .modal-footer { border-color: var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .popover-header { background-color: var(--snx-card-subtle); border-color: var(--snx-line); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .close { color: var(--snx-text-dark); text-shadow: none; opacity: 0.75; }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .close:hover { color: var(--snx-text-dark); opacity: 1; }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .nav-tabs { border-color: var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .nav-tabs .nav-link { color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .nav-tabs .nav-link:hover { border-color: var(--snx-tint) var(--snx-tint) var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .nav-tabs .nav-link.active { background-color: var(--snx-card); border-color: var(--snx-line) var(--snx-line) var(--snx-card); color: var(--snx-text-dark); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .page-link { background-color: var(--snx-card); border-color: var(--snx-line); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .page-item.disabled .page-link { background-color: var(--snx-card); border-color: var(--snx-line); color: var(--snx-text-muted); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-success { background-color: var(--snx-ok-soft); border-color: var(--snx-ok-line); color: var(--snx-ok); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-info { background-color: var(--snx-violet-soft); border-color: var(--snx-violet-line); color: var(--snx-violet-ink); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-warning { background-color: var(--snx-warn-soft); border-color: var(--snx-warn-line); color: var(--snx-warn); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-danger { background-color: var(--snx-bad-soft); border-color: var(--snx-bad-line); color: var(--snx-bad); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-secondary,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert-light { background-color: var(--snx-neutral-soft); border-color: var(--snx-neutral-line); color: var(--snx-neutral); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .alert .alert-link { color: inherit; }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .btn-light { background-color: var(--snx-tint); border-color: var(--snx-line); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .badge-light { background-color: var(--snx-tint); color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .progress,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .breadcrumb { background-color: var(--snx-tint); }

  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .select2-container--default .select2-selection--single,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .select2-container--default .select2-selection--multiple { background-color: #1a1430; border-color: var(--snx-input-border); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--snx-text-dark); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .select2-dropdown { background-color: var(--snx-card); border-color: var(--snx-line); color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .datepicker,
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .daterangepicker { background-color: var(--snx-card); border-color: var(--snx-line); color: var(--snx-text-body); }
  :where(html[data-snx-theme="dark"]) body.snx-dark-ok .jconfirm .jconfirm-box { background-color: var(--snx-card); color: var(--snx-text-body); }
}