/* ═══════════════════════════════════════════════════════════════════════════
   MatrixLine Cloud — panel skin
   Pure black, a floating glass rail and a violet / cyan / pink accent family,
   on the admin, client and sign-in pages (the invoice print page stays light).

   Loaded after app.css. tokens.css maps app.css's roles onto this palette
   (and the light theme), so every existing component follows it; this file
   adds the rail, the top bar, stat cards, panels and the motion. Its
   classes use ad-. Colours come from tokens, so both themes work.

   Motion: entrances (cards, the stat stagger, rings, meters, the revenue
   line) only play under body.ad-enter, which the shell sets on the first
   panel page after sign-in. Hover lifts only apply with a fine pointer.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* The colour, radius and font tokens live in tokens.css (loaded first). */
html[data-skin="black"] {
  font-size: 16px;
  /* The black and the dot grid live on the root so the network background
     (z-index -1, client and sign-in pages) can sit between them and the page. */
  background: #000 radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 28px 28px;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
[data-skin="black"] body {
  background: transparent;
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}
[data-skin="black"] h1, [data-skin="black"] h2, [data-skin="black"] h3,
[data-skin="black"] h4, [data-skin="black"] h5, [data-skin="black"] h6,
[data-skin="black"] .h5, [data-skin="black"] .h6 { font-family: var(--display); letter-spacing: -.01em; color: var(--ink); }
[data-skin="black"] a:hover { color: #fff; }
[data-skin="black"] :focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
/* Fields draw their own focus glow, so they skip the outline. */
[data-skin="black"] .ad-search-box input:focus-visible,
[data-skin="black"] .form-control:focus-visible,
[data-skin="black"] .form-select:focus-visible { outline: none; }
[data-skin="black"] svg { flex: none; }
[data-skin="black"] code { background: rgba(255, 255, 255, .07); color: #e9e9f2; border-radius: 8px; }
[data-skin="black"] kbd.mx-key { background: rgba(255, 255, 255, .08); border: 0; border-radius: 999px; color: #ccc; padding: .18rem .5rem; font: 500 11px var(--sans); }
[data-skin="black"] .mx-label { color: var(--mut); }
[data-skin="black"] .mx-secret { background: rgba(255, 255, 255, .05); border-color: var(--line-2); border-radius: 10px; }
[data-skin="black"] input:-webkit-autofill,
[data-skin="black"] input:-webkit-autofill:hover,
[data-skin="black"] input:-webkit-autofill:focus,
[data-skin="black"] textarea:-webkit-autofill,
[data-skin="black"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--field-autofill) inset; transition: background-color 99999s;
}
/* The focused field keeps its glow on top of the autofill fill. */
[data-skin="black"] .form-control:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--field-autofill) inset, 0 0 0 4px color-mix(in srgb, var(--b) 18%, transparent);
}

.ad-skip { position: absolute; left: -999px; top: 12px; z-index: 2000; padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; }
.ad-skip:focus { left: 12px; color: #000; }

/* ─── Rail ───────────────────────────────────────────────────────────────── */
.ad-rail {
  position: fixed; z-index: 1030;
  left: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: var(--rail); padding: 14px 12px;
  background: rgba(10, 10, 14, .82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 26px;
  overflow: hidden auto; scrollbar-width: none;
  transition: width .45s var(--ease), box-shadow .45s;
}
.ad-rail::-webkit-scrollbar { display: none; }
/* The rail scrolls when its links outgrow the window (short screens, see
   the max-height rule below). It shows a thin scrollbar while hovered, and
   skin.js sets .is-overflowing while links sit below the fold, which fades
   the bottom edge as a cue to scroll. */
.ad-rail:hover { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.ad-rail.is-overflowing {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), rgba(0, 0, 0, .12));
  mask-image: linear-gradient(#000 calc(100% - 56px), rgba(0, 0, 0, .12));
}
/* With a mouse the rail is an icon strip that widens over the page while
   hovered (or while a link in it has keyboard focus) and folds back when the
   pointer leaves. The page is laid out beside the narrow strip. */
@media (hover: hover) and (min-width: 621px) {
  .ad-rail:hover, .ad-rail:focus-within { width: var(--rail-open); box-shadow: 0 0 80px -20px var(--a); }
  .ad-rail:hover .ad-grp, .ad-rail:focus-within .ad-grp,
  .ad-rail:hover .ad-brand-txt, .ad-rail:focus-within .ad-brand-txt { opacity: 1; }
  .ad-rail:hover .ad-nav span, .ad-rail:focus-within .ad-nav span { opacity: 1; transform: none; }
}

/* Touch screens and phones open the rail by tapping the logo (skin.js). */
.ad-rail.open { width: var(--rail-open); box-shadow: 0 0 80px -20px var(--a); }
.ad-rail.open .ad-grp, .ad-rail.open .ad-brand-txt { opacity: 1; }
.ad-rail.open .ad-nav span { opacity: 1; transform: none; }
.ad-scrim {
  position: fixed; inset: 0; z-index: 1029; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ad-fade-in .25s ease;
}
.ad-scrim[hidden] { display: none; }

.ad-brand { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 4px; white-space: nowrap; color: var(--ink); text-decoration: none; }
.ad-brand:hover { color: var(--ink); }
.ad-logo {
  width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center;
  font: 700 15px var(--display); color: #000;
  background: conic-gradient(from var(--ang), var(--a), var(--b), var(--c), var(--a));
  animation: ad-spin 6s linear 1;   /* one turn as the page opens, then still */
}
.ad-logo i { font-style: normal; background: #000; color: #fff; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.ad-logo img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--b) 35%, transparent)); }
/* Overflow clips at the padding edge, so the name would peek out of the
   collapsed rail; it fades in with the labels instead. */
.ad-brand-txt { opacity: 0; transition: opacity .3s; }
.ad-brand-txt b { display: block; font: 600 15px var(--display); }
.ad-brand-txt small { display: block; color: var(--link); font-size: 11px; margin-top: -3px; }

.ad-grp { margin: 12px 0 4px 14px; line-height: 16px; font-size: 11.5px; color: var(--mut); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.ad-nav {
  position: relative; display: flex; align-items: center; gap: 14px;
  height: 38px; padding: 0 13px; border-radius: 14px;
  color: var(--mut); white-space: nowrap; overflow: hidden; text-decoration: none;
  transition: color var(--dur), background var(--dur), transform var(--dur);
}
.ad-nav svg { width: 20px; height: 20px; }
.ad-nav span { opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; font-weight: 500; }
.ad-nav:hover { color: #fff; background: rgba(255, 255, 255, .06); }
@media (hover: hover) and (pointer: fine) { .ad-nav:hover { transform: translateX(3px); } }
.ad-nav.on { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 35%, transparent), transparent); }
.ad-nav.on::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--b), var(--c)); box-shadow: 0 0 14px var(--b);
}
.ad-nav.on svg { color: var(--b); filter: drop-shadow(0 0 6px var(--b)); }
.ad-nav:focus-visible { outline-offset: -2px; }

/* Seventeen links and five group names need about 880px. On shorter
   windows (a 768px laptop) the group names give way to thin dividers and
   the links tighten to 36px, which fits a 740px rail; anything shorter
   scrolls, with the fade above as the cue. Phones have their own rules. */
@media (min-width: 621px) and (max-height: 820px) {
  .ad-rail { padding-top: 10px; padding-bottom: 10px; }
  .ad-brand { height: 44px; }
  .ad-grp { height: 0; margin: 4px 12px; overflow: hidden; border-top: 1px solid var(--line-2); opacity: 1; }
  .ad-nav { height: 36px; }
}
@media (min-width: 621px) and (max-height: 820px) and (pointer: coarse) {
  .ad-nav { height: 40px; }
}

/* An on/off switch that is a real button (e.g. a zone open to orders). */
.ad-switch {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04);
  color: var(--mut); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.ad-switch:hover { border-color: rgba(255, 255, 255, .22); color: var(--ink); }
.ad-switch-knob {
  position: relative; width: 30px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .2s;
}
.ad-switch-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .2s var(--ease);
}
.ad-switch.on { color: #4ade80; border-color: color-mix(in srgb, #4ade80 40%, transparent); background: color-mix(in srgb, #4ade80 10%, transparent); }
.ad-switch.on .ad-switch-knob { background: #22c55e; }
.ad-switch.on .ad-switch-knob::after { transform: translateX(12px); }

/* ─── Main and top bar ───────────────────────────────────────────────────── */
.ad-main { margin-left: calc(var(--rail) + 44px); padding: 22px 28px 60px 14px; max-width: 1500px; outline: none; }
.ad-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; }
.ad-title { margin-right: auto; min-width: 0; }
.ad-title h1 { font: 700 28px/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
.ad-title p { font: 500 13px/1.4 var(--sans); color: var(--mut); margin: 6px 0 0; }
.ad-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ad-actions .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

.ad-search { position: relative; }
.ad-search-box {
  display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 8px 0 16px;
  width: min(340px, 40vw); border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--mut); cursor: text;
  transition: width .3s var(--ease), border-color .3s, box-shadow .3s;
}
.ad-search-box svg { width: 20px; height: 20px; }
.ad-search-box:focus-within {
  border-color: var(--b); width: min(420px, 46vw);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--b) 18%, transparent), 0 0 40px -8px var(--b);
}
.ad-search-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; }
.ad-search-box input::placeholder { color: var(--mut); }
.ad-search-box input::-webkit-search-cancel-button { display: none; }
.ad-search-box kbd { font: 500 11px var(--sans); padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #ccc; white-space: nowrap; }

.ad-search-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1035;
  width: min(480px, 86vw); max-height: min(60vh, 520px); overflow-y: auto; padding: 8px;
  background: var(--solid); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-2); border-radius: 22px;
  box-shadow: 0 30px 80px -24px color-mix(in srgb, var(--a) 55%, transparent);
  animation: ad-pop .2s var(--ease);
}
.ad-hit-grp { padding: 10px 12px 4px; font-size: 11.5px; color: var(--mut); }
.ad-hit { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; color: var(--text-dim); text-decoration: none; }
.ad-hit > .bi, .ad-hit > svg { width: 18px; font-size: 16px; text-align: center; color: var(--mut); flex: none; }
.ad-hit .body { flex: 1; min-width: 0; }
.ad-hit .t, .ad-hit .m { display: block; }
.ad-hit .t { color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-hit .m { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-hit.active, .ad-hit:hover { background: color-mix(in srgb, var(--a) 18%, transparent); color: #fff; }
.ad-hit.active > .bi, .ad-hit.active > svg { color: var(--b); }
.ad-hit-empty { padding: 18px 12px; color: var(--mut); text-align: center; }

.ad-wallet { font-variant-numeric: tabular-nums; }
.ad-wallet svg { color: var(--b); }
.ad-ava { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--veil), var(--veil)), linear-gradient(135deg, var(--c), var(--a)); color: var(--on-a); font: 700 12px var(--display); }
.ad-user { padding-left: 9px !important; }
/* Search button (phones), theme and account: plain items of the bar on wide
   screens, one unbreakable group on phones (see Responsive). */
.ad-tools { display: contents; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
[data-skin="black"] .btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: 600 14px/1.2 var(--sans); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur), border-color var(--dur), background-color var(--dur), color var(--dur);
}
[data-skin="black"] .btn svg { width: 18px; height: 18px; }
/* Buttons answer a hover with the border and glow only; they do not move. */
[data-skin="black"] .btn:hover { border-color: rgba(255, 255, 255, .25); box-shadow: 0 10px 30px -10px var(--a); color: #fff; }
[data-skin="black"] .btn:active { transform: scale(.96); }
[data-skin="black"] .btn:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; box-shadow: none; }
[data-skin="black"] .btn:disabled, [data-skin="black"] .btn.disabled { opacity: .45; transform: none; box-shadow: none; }
[data-skin="black"] .btn.is-busy:disabled, [data-skin="black"] .btn.is-busy.disabled { opacity: .8; }
[data-skin="black"] .btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; gap: 6px; }
[data-skin="black"] .btn-sm svg { width: 16px; height: 16px; }
[data-skin="black"] .btn-lg { min-height: 50px; padding: 0 26px; font-size: 15px; }

[data-skin="black"] .btn-primary,
[data-skin="black"] .btn-primary:hover,
[data-skin="black"] .btn-primary:focus,
[data-skin="black"] .btn-primary:active {
  background: linear-gradient(var(--veil), var(--veil)),
              linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--b))) !important;
  border-color: transparent !important; color: var(--on-a) !important;
}
[data-skin="black"] .btn-primary:hover { box-shadow: 0 12px 32px -10px var(--a), inset 0 0 0 1px rgba(255, 255, 255, .2); }
[data-skin="black"] .btn-outline-secondary.text-danger:hover { box-shadow: 0 10px 30px -12px var(--danger-btn); }
/* A tinted danger button whose text reads in both themes. */
[data-skin="black"] .btn-danger { background: var(--r-soft); border-color: var(--r-line); color: var(--b-danger-fg); }
[data-skin="black"] .btn-danger:hover,
[data-skin="black"] .btn-danger:focus-visible,
[data-skin="black"] .btn-danger:active {
  background: color-mix(in srgb, var(--red) 24%, transparent); border-color: var(--red); color: var(--ink);
  box-shadow: 0 10px 30px -12px var(--danger-btn);
}
[data-skin="black"] .btn-link { background: none; border-color: transparent; color: var(--link); }
/* Bootstrap's close button focuses with the accent ring, not its blue. */
[data-skin="black"] .btn-close { --bs-btn-close-focus-shadow: var(--focus); }

/* Press feedback: a ripple from the exact click point (added by skin.js). */
.ad-rp { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ad-rp .6s ease-out forwards; pointer-events: none; }

/* The standout primary action: a rotating multi-colour border. */
.ad-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 14px var(--display); color: #fff; background: #000; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.ad-cta svg { width: 18px; height: 18px; }
/* The border turns three times as the page opens, then rests. */
.ad-cta::before { content: ""; position: absolute; inset: -2px; z-index: -2; background: conic-gradient(from var(--ang), var(--a), var(--b), var(--c), var(--a)); animation: ad-spin 3s linear 3; }
.ad-cta::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 999px; background: #07070b; transition: background var(--dur); }
.ad-cta:hover { color: #fff; box-shadow: 0 0 40px -6px var(--a); }
@media (hover: hover) and (pointer: fine) { .ad-cta:hover { transform: scale(1.05); } }
.ad-cta:hover::after { background: rgba(7, 7, 11, .55); }
.ad-cta:active { transform: scale(.98); }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
/* A soft spotlight follows the cursor (skin.js sets --mx / --my). It sits
   behind the card's content, so text is never tinted. */
[data-skin="black"] .card,
.ad-stat, .ad-panel {
  --mx: 50%; --my: 50%;
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; color: var(--ink); box-shadow: none;
}
[data-skin="black"] .card::before,
.ad-stat::before, .ad-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--a) 28%, transparent), transparent 65%);
  opacity: 0; transition: opacity var(--dur-slow);
}
[data-skin="black"] .card:hover::before, .ad-stat:hover::before, .ad-panel:hover::before { opacity: 1; }
[data-skin="black"] .card { transition: border-color var(--dur-slow), transform var(--dur-slow) var(--ease); }
/* Cards fly in on the first panel page of a session only, and on sign-in. */
.ad-enter .card, [data-area="guest"] .ad-auth-panel { animation: ad-in .7s var(--ease) backwards; }
[data-skin="black"] .card:hover { border-color: rgba(255, 255, 255, .16); }
[data-skin="black"] a.card:hover { border-color: rgba(255, 255, 255, .2); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { [data-skin="black"] a.card:hover { transform: translateY(-4px); } }
[data-skin="black"] .card.border-danger { border-color: rgba(248, 113, 113, .4); box-shadow: none; }
[data-skin="black"] .card.border-primary { border-color: color-mix(in srgb, var(--a) 55%, transparent); box-shadow: none; }
[data-skin="black"] .card-header {
  background: transparent; border-bottom: 1px solid var(--line); border-radius: 24px 24px 0 0;
  padding: 16px 22px; font: 600 15px var(--display); letter-spacing: -.01em; color: var(--ink);
}
[data-skin="black"] .card-header { flex-wrap: wrap; row-gap: 10px; }
[data-skin="black"] .card-header > .bi:first-child { color: var(--b); }
[data-skin="black"] .card-header > svg:first-child { width: 18px; height: 18px; color: var(--b); }

/* icon() SVGs default to the text size wherever no component sizes them. :where() keeps this at
   zero specificity, so every sized rule (.btn svg, .ad-chip svg, …) still wins. */
:where(svg[viewBox="0 0 24 24"][stroke="currentColor"][aria-hidden="true"]) { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
[data-skin="black"] .card-body { padding: 20px 22px; }
[data-skin="black"] .card-footer { background: rgba(255, 255, 255, .02); border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; padding: 14px 22px; }

.ad-stat, .ad-panel { transition: transform var(--dur-slow) var(--ease), border-color var(--dur-slow); }
/* The stat stagger, like the card entrance, plays once per session. */
.ad-enter .ad-stat, .ad-enter .ad-panel {
  animation: ad-in .8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.ad-stat:hover, .ad-panel:hover { border-color: rgba(255, 255, 255, .2); }
@media (hover: hover) and (pointer: fine) { .ad-stat:hover, .ad-panel:hover { transform: translateY(-4px); } }

.ad-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
/* The admin dashboard's eight tiles (partials/statstrip) sit four across,
   two on narrower screens, so they never break 3 + 3 + 2. */
.ad-kpis > .ad-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ad-kpis + .ad-two { margin-top: 0; }

/* A problem with a way to fix it: icon, sentence, then the action button. */
.ad-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ad-alert > svg { width: 20px; height: 20px; }
.ad-alert > p { flex: 1 1 260px; min-width: 0; margin: 0; }

/* --k is the tile's accent: style="--k:var(--k-cyan)" (tokens.css). */
.ad-stat { --k: var(--k-green); display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 20px 22px 34px; overflow: hidden; text-decoration: none; }
a.ad-stat:hover { color: var(--ink); }
.ad-stat .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--mut); font-weight: 500; }
.ad-chip {
  width: 40px; height: 40px; flex: none; border-radius: 14px; display: grid; place-items: center;
  color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 35%, transparent);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow);
}
.ad-chip svg { width: 20px; height: 20px; }
.ad-chip .bi { font-size: 18px; line-height: 1; }
.ad-stat:hover .ad-chip { box-shadow: inset 0 0 0 1px var(--k), 0 0 24px -2px var(--k); }
@media (hover: hover) and (pointer: fine) { .ad-stat:hover .ad-chip { transform: rotate(-10deg) scale(1.12); } }
/* The number scales with its card (container units), so ₹12,34,567 still fits
   a four-column row at 1120px; browsers without them keep 34px. */
.ad-stat { container-type: inline-size; }
.ad-num { font: 700 34px/1.1 var(--display); font-size: clamp(22px, 18cqi, 34px); letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-sub { color: var(--mut); font-size: 13px; }

.ad-ring { --ring: var(--b); position: relative; width: 46px; height: 46px; flex: none; }
.ad-ring.warn { --ring: var(--dot-warn); }
.ad-ring.crit { --ring: var(--dot-bad); }
.ad-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.ad-ring circle { fill: none; stroke-width: 4; }
.ad-ring .t { stroke: rgba(255, 255, 255, .1); }
.ad-ring .v { stroke: var(--ring); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: var(--off, 113.1); filter: drop-shadow(0 0 4px var(--ring)); }
.ad-enter .ad-ring .v { stroke-dashoffset: 113.1; animation: ad-ring 1.4s .4s var(--ease) forwards; }
.ad-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px var(--display); letter-spacing: -.03em; color: var(--ink); }

/* ─── Dashboard panels ───────────────────────────────────────────────────── */
.ad-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.ad-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ad-panel { padding: 20px 22px; min-width: 0; }
.ad-panel.is-alert { border-color: rgba(248, 113, 113, .35); }
.ad-panel.is-alert .ad-ph > svg { color: var(--red); }
.ad-blank { display: grid; place-items: center; min-height: 340px; }
.ad-ph { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ad-ph > svg { width: 20px; height: 20px; color: var(--b); }
.ad-ph h2 { font: 600 17px var(--display); letter-spacing: -.01em; margin: 0 auto 0 0; }
.ad-ph .tag { color: var(--mut); font-size: 12.5px; }

.ad-empty { display: grid; place-items: center; text-align: center; gap: 12px; color: var(--mut); padding: 18px 0; }
.ad-empty h2 { font: 600 18px var(--display); margin: 0; }
.ad-empty p { max-width: 420px; margin: 0; }

.ad-figures { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: -4px 0 14px; }
.ad-figures span { display: block; color: var(--mut); font-size: 12px; }
.ad-figures b { font: 600 19px/1.3 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ad-chart {
  position: relative; height: 140px; border-radius: 16px; overflow: hidden;
  background: repeating-linear-gradient(0deg, transparent 0 34px, var(--line) 34px 35px);
}
.ad-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-chart .ln { fill: none; stroke: url(#adLine); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ad-chart .area { fill: url(#adFill); }
.ad-enter .ad-chart .ln { stroke-dashoffset: 1; animation: ad-draw 2.2s .5s ease forwards; }
.ad-enter .ad-chart .area { opacity: 0; animation: ad-show 1s 1.4s ease forwards; }
.ad-chart .hit { fill: transparent; }
.ad-chart .hit:hover { fill: rgba(255, 255, 255, .05); }
.ad-chart p { position: absolute; left: 16px; right: 16px; top: 12px; margin: 0; color: var(--mut); }
.ad-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 0 var(--b); animation: ad-pulse 2s infinite; pointer-events: none; }
.ad-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--mut); font-size: 12px; }

.ad-radar {
  position: relative; width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--line);
  background: radial-gradient(circle, transparent 30%, var(--line) 31%, transparent 32%, transparent 60%, var(--line) 61%, transparent 62%);
}
.ad-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--ang), transparent 0 75%, color-mix(in srgb, var(--b) 55%, transparent)); animation: ad-spin 3s linear infinite; }
.ad-radar svg { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: #fff; }

.ad-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--b); border: 2px solid color-mix(in srgb, var(--b) 50%, transparent); animation: ad-glow 3s ease-in-out infinite; }
.ad-ok svg { width: 30px; height: 30px; stroke-width: 2.2; stroke-dasharray: 30; stroke-dashoffset: 0; }
.ad-enter .ad-ok svg { stroke-dashoffset: 30; animation: ad-draw 1s .6s forwards; }

.ad-nodes, .ad-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ad-node {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px; padding: 10px 12px; border-radius: 16px;
  color: var(--ink); text-decoration: none; transition: background var(--dur), transform var(--dur);
}
.ad-node:hover, .ad-list a:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ad-node:hover, .ad-list a:hover { transform: translateX(3px); } }
.ad-node .id { min-width: 0; }
.ad-node .id b, .ad-list b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-node .id small, .ad-list small { display: block; color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-node .vms { text-align: center; line-height: 1.15; }
.ad-node .vms b { display: block; font: 600 16px var(--display); }
.ad-node .vms small { color: var(--mut); font-size: 11px; }
.ad-meter { display: block; min-width: 0; }
.ad-meter > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 11.5px; color: var(--mut); white-space: nowrap; }
.ad-meter em { font-style: normal; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ad-meter i { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ad-meter i::after {
  content: ""; display: block; height: 100%; width: var(--p); border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, var(--a), var(--b));
}
.ad-enter .ad-meter i::after { animation: ad-grow 1.2s .5s var(--ease) backwards; }
.ad-meter.warn i::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ad-meter.crit i::after { background: linear-gradient(90deg, #ef4444, #f87171); }
.ad-meter-note { grid-column: span 2; color: var(--mut); font-size: 12.5px; }
.ad-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background var(--dur), transform var(--dur); }
.ad-list .body { min-width: 0; }

.ad-tl { list-style: none; padding: 0; margin: 0; position: relative; }
.ad-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--b), transparent); }
.ad-tl li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 26px; border-radius: 10px; transition: background .25s, padding .25s; }
.ad-tl li:hover { background: rgba(255, 255, 255, .05); padding-left: 32px; }
.ad-tl li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: #000; border: 2px solid var(--b); box-shadow: 0 0 10px var(--b); }
.ad-tl li:first-child::before { animation: ad-pulse 2s infinite; }
.ad-tl li > div { min-width: 0; overflow-wrap: anywhere; }
.ad-tl small { display: block; color: var(--mut); }
.ad-tl time { color: var(--mut); font-size: 12.5px; white-space: nowrap; }

/* ─── Existing components, restyled ──────────────────────────────────────── */
[data-skin="black"] .table thead th { background: transparent; color: var(--mut); font: 600 12px var(--sans); border-bottom: 1px solid var(--line); }
[data-skin="black"] .table > :not(caption) > * > * { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--line-soft); }
[data-skin="black"] .table > :not(caption) > * > *:first-child { padding-left: 22px; }
[data-skin="black"] .table > :not(caption) > * > *:last-child { padding-right: 22px; }

[data-skin="black"] .form-control, [data-skin="black"] .form-select {
  min-height: 44px; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  background-color: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--ink);
}
[data-skin="black"] textarea.form-control { min-height: 96px; }
[data-skin="black"] .form-select { padding-right: 38px; }
[data-skin="black"] .form-control:hover, [data-skin="black"] .form-select:hover { border-color: rgba(255, 255, 255, .22); }
[data-skin="black"] .form-control:focus, [data-skin="black"] .form-select:focus {
  background-color: rgba(255, 255, 255, .06); border-color: var(--b); color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--b) 18%, transparent), 0 0 30px -12px var(--b);
}
[data-skin="black"] .form-control-sm, [data-skin="black"] .form-select-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; border-radius: 12px; font-size: 13px; }
/* The open option list follows the theme (a solid surface, never black on light). */
[data-skin="black"] .form-select option,
[data-skin="black"] .form-select optgroup { background: var(--solid); color: var(--text); }
[data-skin="black"] .form-label { color: var(--text-dim); font-size: 13px; }
[data-skin="black"] .form-text { color: var(--mut); }
[data-skin="black"] .input-group-text { background: rgba(255, 255, 255, .05); border-color: var(--line-2); color: var(--mut); border-radius: 14px; }
[data-skin="black"] .form-check-input { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
[data-skin="black"] .form-check-input:checked { background-color: var(--a); border-color: var(--a); box-shadow: 0 0 14px -2px var(--a); }
[data-skin="black"] .form-check-input:focus { border-color: var(--b); box-shadow: var(--focus); }
[data-skin="black"] .form-check-input:checked:focus { box-shadow: 0 0 14px -2px var(--a), var(--focus); }
/* A focused, unchecked switch shows an accent knob instead of Bootstrap's blue. */
[data-skin="black"] .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: var(--switch-knob-focus); }

[data-skin="black"] .badge { border-radius: 999px; padding: .38em .78em; font-weight: 600; }
[data-skin="black"] .spinner-border { color: var(--b); }
[data-skin="black"] tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--b); }

[data-skin="black"] .alert { border-radius: 18px; }

/* Menus sit above the rail (1030) and below modals (1050). The entrance uses
   the separate translate/scale properties so it composes with the transform
   Popper positions the menu with. */
[data-skin="black"] .dropdown-menu { --bs-dropdown-zindex: 1045; }
[data-skin="black"] .dropdown-menu.show { animation: ad-menu .18s var(--ease); transform-origin: top right; }
[data-skin="black"] .dropdown-menu {
  background: var(--solid); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 6px;
  box-shadow: 0 30px 80px -24px color-mix(in srgb, var(--a) 50%, transparent);
}
[data-skin="black"] .dropdown-item { border-radius: 12px; padding: 9px 12px; color: var(--text-dim); font-size: 13.5px; }
[data-skin="black"] .dropdown-item svg { width: 16px; height: 16px; color: var(--mut); }
[data-skin="black"] .dropdown-item:hover, [data-skin="black"] .dropdown-item:focus { background: rgba(255, 255, 255, .07); color: #fff; }
[data-skin="black"] .dropdown-item:hover svg { color: var(--b); }
[data-skin="black"] .dropdown-item:active, [data-skin="black"] .dropdown-item.active { background: var(--g-soft); color: var(--ink); }

/* --solid is near-black in the dark theme and white in the light one. */
[data-skin="black"] .modal-content { background: var(--solid); color: var(--ink); border: 1px solid var(--line-2); border-radius: 26px; box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--a) 50%, transparent); }
[data-skin="black"] .modal-header { padding: 18px 24px; }
[data-skin="black"] .modal-title { font-family: var(--display); }
[data-skin="black"] .modal-footer { background: transparent; padding: 14px 24px; }
[data-skin="black"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .8; }

[data-skin="black"] .nav-tabs { border-bottom-color: var(--line); }
[data-skin="black"] .nav-tabs .nav-link { color: var(--mut); }
[data-skin="black"] .nav-tabs .nav-link:hover { color: #fff; }
[data-skin="black"] .nav-tabs .nav-link.active { color: #fff; border-bottom-color: var(--b); box-shadow: 0 8px 16px -12px var(--b); }
[data-skin="black"] .nav-link:focus-visible { box-shadow: none; }

[data-skin="black"] .pagination { gap: 6px; flex-wrap: wrap; --bs-pagination-focus-box-shadow: var(--focus); }
[data-skin="black"] .page-link { min-width: 38px; text-align: center; border-radius: 999px !important; border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); }
[data-skin="black"] .page-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
[data-skin="black"] .page-item.active .page-link { background: linear-gradient(var(--veil), var(--veil)), linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--b))); border-color: transparent; color: var(--on-a); }

[data-skin="black"] .progress { background: rgba(255, 255, 255, .08); }
[data-skin="black"] .progress-bar { background: linear-gradient(90deg, var(--a), var(--b)); }

[data-skin="black"] .mx-empty { color: var(--mut); }
[data-skin="black"] .mx-empty .icon {
  width: 64px; height: 64px; border-radius: 50%; background: transparent; color: var(--b); font-size: 1.5rem;
  border: 2px solid color-mix(in srgb, var(--b) 45%, transparent); animation: ad-glow 3s ease-in-out infinite;
}

[data-skin="black"] .mx-gauge { --ring: var(--b); }
[data-skin="black"] .mx-gauge.warn { --ring: var(--dot-warn); }
[data-skin="black"] .mx-gauge.crit { --ring: var(--dot-bad); }

[data-skin="black"] .mx-stat .value { font-family: var(--display); }
[data-skin="black"] .mx-stat-ico, [data-skin="black"] .mx-cat-icon { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--accent-line, var(--line-2)); }

[data-skin="black"] .mx-timeline li { border-left-color: rgba(255, 255, 255, .1); }
[data-skin="black"] .mx-timeline li::before { background: #000; border: 2px solid var(--b); box-shadow: 0 0 10px var(--b); width: 12px; height: 12px; left: -7px; }
[data-skin="black"] .mx-timeline li.ok::before { border-color: var(--dot-ok); box-shadow: 0 0 10px var(--dot-ok); }
[data-skin="black"] .mx-timeline li.fail::before { border-color: var(--dot-bad); box-shadow: 0 0 10px var(--dot-bad); }

/* (0,2,1) so it beats the .form-control padding above: text starts clear of the
   funnel icon, and of the "/" hint where the box has one. */
[data-skin="black"] .mx-filter-box input { border-radius: 999px; padding-left: 32px; }
[data-skin="black"] .mx-filter-box:has(kbd) input { padding-right: 36px; }
[data-skin="black"] .mx-pick { border-radius: 16px; }

[data-skin="black"] .mx-bulk-bar {
  border-radius: 22px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--a) 55%, transparent);
}
[data-skin="black"] .mx-bulk-bar .count { background: var(--a); }
.ad-content:has(.mx-bulk-bar) { padding-bottom: 5.5rem; }

[data-skin="black"] .mx-toast {
  background: var(--solid); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 16px;
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--a) 55%, transparent);
}

/* ─── Sign-in pages ───────────────────────────────────────────────────────── */
.ad-auth {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px;
}
.ad-auth-card { width: 100%; max-width: 420px; }
.ad-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; color: var(--ink); text-decoration: none; }
.ad-auth-brand:hover { color: var(--ink); }
.ad-auth-brand img {
  width: 200px; height: auto; animation: ad-float 7s ease-in-out infinite;
  filter: drop-shadow(0 10px 34px color-mix(in srgb, var(--a) 40%, transparent));
}
.ad-auth-brand small { color: var(--link); font-size: 12.5px; letter-spacing: .01em; }
.ad-auth-panel { border-radius: 26px; box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--a) 55%, transparent); }
.ad-auth-panel > .card-body { padding: 28px; }
.ad-auth-panel h2 { font: 700 22px var(--display); letter-spacing: -.02em; }
.ad-auth-foot { margin: 18px 0 0; text-align: center; color: var(--mut); font-size: 12.5px; }

/* ─── Network background (sign-in pages) ─────────────────────────────────── */
/* Fixed behind everything at z-index -1: above the root's black and dots,
   below the page, so no z-index is needed on the content (which would trap
   Bootstrap's modals under their backdrop). skin.js fills and animates it. */
.ad-net { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint; --gi: 1; }
.ad-net.paused * { animation-play-state: paused !important; }
.ad-net-glow, .ad-net-logo { position: absolute; inset: -30px; will-change: transform; }
.ad-net-glow { opacity: var(--gi); }
.ad-net-glow::before {
  content: ""; position: absolute; inset: 0; animation: ad-net-glow 10s ease-in-out infinite;
  background:
    radial-gradient(ellipse 34% 42% at 16% 50%, color-mix(in srgb, var(--a) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 42% at 84% 50%, color-mix(in srgb, var(--b) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 45% at 50% 50%, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%);
}
.ad-net-svg { position: absolute; left: -30px; top: -30px; width: calc(100% + 60px); height: calc(100% + 60px); will-change: transform; }
.ad-net-logo { display: grid; place-items: center; }
.ad-net-logo img {
  width: min(64vw, 760px); max-height: 70vh; height: auto; object-fit: contain;
  opacity: .14; mix-blend-mode: screen; user-select: none; animation: ad-net-breath 14s ease-in-out infinite;
}
.ad-net .halo { transform-box: fill-box; transform-origin: center; animation: ad-net-halo 7s ease-in-out infinite; }
.ad-net .cloud-right .halo { animation-delay: -3.5s; }
.ad-net .cf { animation: ad-net-float 9s ease-in-out infinite; }
.ad-net .cloud-right .cf { animation-delay: -4.5s; }
.ad-net .cloud-left { color: var(--a); }
.ad-net .cloud-right { color: var(--b); }
/* The cloud is drawn through <use>, whose copies only match single-class
   selectors, so these three carry unique names instead of .ad-net scoping. */
.ad-net-shape { fill: rgba(255, 255, 255, .025); stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.ad-net-wire { fill: none; stroke: var(--b); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ad-net-node { fill: var(--b); animation: ad-net-node 3s ease-in-out infinite; }
.ad-net-node:nth-of-type(2n) { animation-delay: -1s; }
.ad-net-node:nth-of-type(3n) { animation-delay: -2s; }
.ad-net .data-path { fill: none; stroke: var(--b); stroke-opacity: .16; stroke-width: 1; }
.ad-net .data-path.flow { stroke: var(--a); stroke-opacity: .9; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 46 554; animation: ad-net-flow 6s linear infinite; }
.ad-net .data-path.flow.rev { animation-direction: reverse; stroke: var(--c); }
.ad-net .c-a { fill: var(--a); stroke: var(--a); }
.ad-net .c-b { fill: var(--b); stroke: var(--b); }
.ad-net .c-c { fill: var(--c); stroke: var(--c); }
.ad-net .data-particle { stroke-opacity: .28; stroke-width: 5; opacity: 0; }
.ad-net .data-particle.big { stroke-opacity: .35; stroke-width: 10; }
.ad-net .data-particle.big-halo { stroke: none; fill-opacity: .18; }
.ad-net .bit { font: 500 12px "Courier New", monospace; fill: var(--b); opacity: 0; animation: ad-net-bit var(--d, 8s) ease-in-out infinite; }
.ad-net .dust { opacity: .1; animation: ad-net-drift var(--d, 18s) ease-in-out infinite; }

/* Cards on the sign-in pages blur the moving network slightly behind them.
   They hold no modals or menus, which a backdrop-filter would re-anchor. */
.ad-has-net .card, .ad-has-net .ad-stat, .ad-has-net .ad-panel {
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}

@keyframes ad-net-glow   { 50% { opacity: .6; } }
@keyframes ad-net-breath { 0%, 100% { opacity: .13; } 40% { opacity: .18; } 55% { opacity: .28; } 70% { opacity: .17; } }
@keyframes ad-net-halo   { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ad-net-float  { 50% { transform: translateY(-12px); } }
@keyframes ad-net-node   { 50% { opacity: .3; } }
@keyframes ad-net-flow   { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes ad-net-bit    { 50% { opacity: .3; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes ad-net-drift  { 50% { transform: translate(var(--dx), var(--dy)); opacity: .4; } }

@media (max-width: 620px) { .ad-net-logo img { width: 86vw; } }
@media (prefers-reduced-motion: reduce) {
  .ad-net *, .ad-net-glow::before, .ad-net-node { animation: none !important; }
  .ad-net .bit, .ad-net .dust { display: none; }
  .ad-net-logo img { opacity: .16; }
}

/* ─── Motion ─────────────────────────────────────────────────────────────── */
@keyframes ad-in    { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes ad-spin  { to { --ang: 360deg; } }
@keyframes ad-draw  { to { stroke-dashoffset: 0; } }
@keyframes ad-show  { to { opacity: 1; } }
@keyframes ad-grow  { from { transform: scaleX(0); } }
@keyframes ad-ring  { to { stroke-dashoffset: var(--off, 113.1); } }
@keyframes ad-rp    { to { transform: scale(3); opacity: 0; } }
@keyframes ad-pop   { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ad-pulse { 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ad-glow  { 50% { box-shadow: 0 0 36px -4px var(--b); } }
@keyframes ad-menu  { from { opacity: 0; translate: 0 -6px; scale: .97; } }
@keyframes ad-fade-in { from { opacity: 0; } }
@keyframes ad-float { 50% { translate: 0 -6px; } }

/* Page changes crossfade (Chrome, Edge, Safari 18.2+; others just navigate),
   with the rail holding still between pages. */
@view-transition { navigation: auto; }
.ad-rail { view-transition-name: ad-rail; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
/* The phone search button (shell.php) only shows at 620px and below. */
.ad-top .ad-search-btn { display: none; }

@media (max-width: 1100px) {
  .ad-kpis > .ad-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-two { grid-template-columns: minmax(0, 1fr); }
  .ad-title { flex: 1 1 100%; }
  .ad-search { flex: 1 1 220px; }
  .ad-search-box, .ad-search-box:focus-within { width: 100%; }
  .ad-user-name { display: none; }
  .ad-user { width: 44px; padding: 0 !important; }
}
@media (max-width: 760px) {
  /* Table filters take their own row and share it instead of holding fixed widths. */
  [data-skin="black"] .card-header form { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0 !important; }
  [data-skin="black"] .card-header form > .form-control,
  [data-skin="black"] .card-header form > .form-select { flex: 1 1 140px; width: auto !important; min-width: 0; }
  .ad-node { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ad-node .ad-meter, .ad-meter-note { grid-column: 1 / -1; }
  .ad-node .ad-meter { order: 9; }
}
/* Phones: a slimmer rail, a compact top bar and two-column stat cards. Every
   page scrolls normally; text stays at 13px or more (12px for small labels)
   and everything you tap is at least 40px tall. */
@media (max-width: 620px) {
  html[data-skin="black"] { --rail: 52px; --rail-open: 232px; }
  /* Bootstrap's default row gutter (-12px) is wider than the 10px phone gutter; match it so forms don't overhang. */
  .ad-content .row:not([class*="g-"]):not([class*="gx-"]) { --bs-gutter-x: 1.25rem; }
  .ad-rail { left: 6px; top: calc(8px + env(safe-area-inset-top, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 20px; padding: 8px 6px; }
  .ad-brand { height: 40px; padding: 0 2px; gap: 10px; }
  .ad-logo { width: 34px; height: 34px; border-radius: 11px; }
  .ad-logo i { width: 27px; height: 27px; border-radius: 9px; }
  .ad-logo img { width: 20px; height: 20px; }
  /* Group names show only in the opened rail. */
  .ad-grp { height: 0; overflow: hidden; margin: 3px 0 3px 10px; font-size: 12px; line-height: 16px; transition: height .3s, opacity .3s; }
  .ad-rail.open .ad-grp { height: 16px; }
  .ad-nav { height: 40px; padding: 0 10px; gap: 12px; border-radius: 11px; }
  .ad-nav svg { width: 18px; height: 18px; }

  .ad-main { margin-left: calc(var(--rail) + 12px); padding: 10px 10px 40px 0; }
  .ad-top { gap: 8px; margin-bottom: 14px; justify-content: flex-end; }
  /* The title keeps at least 140px (a hostname must not run under the
     buttons). Search, theme and account wrap as one group: beside the title
     when they fit, otherwise together on the next row, never leaving the
     account button on a row of its own. */
  .ad-title { flex: 1 1 140px; }
  .ad-tools { display: flex; flex: none; align-items: center; gap: 6px; }
  /* The client bar also carries the wallet pill: the title shares the first
     row with theme and account (86px plus the gap), and the wallet and page
     actions always take the second. */
  [data-area="client"] .ad-title { flex-basis: calc(100% - 100px); }
  [data-area="client"] .ad-tools { order: 1; }
  [data-area="client"] .ad-wallet, [data-area="client"] .ad-actions { order: 2; }
  .ad-title h1 { font-size: 18px; }
  .ad-title p { font-size: 13px; margin-top: 4px; line-height: 1.35; }
  .ad-top .btn, .ad-actions .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .ad-top .ad-user, .ad-top .ad-theme, .ad-top .ad-search-btn { width: 40px; padding: 0 !important; }
  .ad-ava { width: 26px; height: 26px; font-size: 12px; }

  /* Search folds into a button; a tap opens the field as its own row under
     the title (skin.js), and Escape or a second tap folds it away. */
  .ad-top .ad-search-btn { display: inline-flex; }
  .ad-top .ad-search-btn[aria-expanded="true"] { border-color: var(--b); color: var(--ink); }
  .ad-search { display: none; }
  .ad-search.open { display: block; flex: 1 1 100%; order: 10; }
  .ad-search-box kbd { display: none; }
  .ad-search-pop { left: 0; right: 0; width: auto; max-height: min(60vh, 440px); }
  .ad-hit { min-height: 44px; }
  .ad-hit .m { font-size: 13px; }
  .ad-hit-grp { font-size: 12px; }

  .ad-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ad-stat { min-height: 0; gap: 4px; padding: 12px 12px 14px; border-radius: 16px; }
  .ad-stat .top { font-size: 12px; line-height: 1.3; gap: 6px; align-items: flex-start; }
  .ad-chip { width: 32px; height: 32px; border-radius: 10px; }
  .ad-chip svg { width: 16px; height: 16px; }
  .ad-chip .bi { font-size: 15px; }
  .ad-num { font-size: clamp(17px, 5.4vw, 22px); font-size: clamp(17px, 17cqi, 22px); margin-top: 2px; }
  .ad-sub { font-size: 13px; line-height: 1.35; }
  /* A 40px ring has no room for "100%": the ring stays as the gauge, and the
     card's hint ("N% allocated") and the ring's label carry the figure. */
  .ad-ring, .ad-ring svg { width: 40px; height: 40px; }
  .ad-ring b { display: none; }

  /* Dashboard panels: one column, tighter padding, readable lists. */
  .ad-panel { padding: 16px 14px; border-radius: 18px; }
  .ad-ph { gap: 10px; margin-bottom: 12px; }
  .ad-ph h2 { font-size: 16px; }
  .ad-ph .tag { font-size: 13px; }
  .ad-ph .btn { min-height: 40px; }
  .ad-alert { align-items: flex-start; }
  .ad-alert > svg { margin-top: 1px; }
  .ad-alert > p { flex: 1 1 0; }
  .ad-alert > .btn { flex: 1 1 100%; min-height: 40px; }
  .ad-figures { gap: 8px 20px; }
  .ad-node, .ad-list a { min-height: 48px; padding: 10px 8px; }
  .ad-node .id small, .ad-list small, .ad-tl small, .ad-tl time, .ad-meter-note, .ad-meter > span { font-size: 13px; }
  .ad-node .vms small, .ad-panel .badge { font-size: 12px; }
  .ad-radar { width: 104px; height: 104px; }
}

/* All motion switches off when the system asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  [data-skin="black"] *, [data-skin="black"] *::before, [data-skin="black"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Paper is white: printing swaps the skin for dark text on white. */
@media print {
  html[data-skin="black"] {
    --bg: #fff; --ink: #0f172a; --text: #0f172a; --text-dim: #3f4b5e; --mut: #5b6678; --text-mute: #5b6678; --text-faint: #8a95a6;
    --panel: #fff; --surface: #fff; --surface-2: #f8fafc; --surface-3: #f1f5f9;
    --line: #dde2e8; --line-2: #dde2e8; --line-soft: #eef1f4; --green-hi: #047857; --link: #0e7490;
    --b-success-fg: #047857; --b-danger-fg: #b91c1c; --b-warning-fg: #b45309; --b-info-fg: #0e7490; --b-neutral-fg: #475569;
    background: #fff;
  }
  .ad-rail, .ad-top, .ad-skip, .ad-dot, .ad-net { display: none !important; }
  .ad-main { margin: 0; padding: 0; max-width: none; }
  [data-skin="black"] body { background: #fff; color: #0f172a; }
  .ad-stat, .ad-panel, [data-skin="black"] .card, .ad-enter .ad-stat, .ad-enter .ad-panel, .ad-enter .card { animation: none; }
}