/* ==========================================================================
   Destiny SMS — agent panel skin (reseller reference layout)
   Visual language lifted from the reseller SMS panel the business is modelled
   on: flat solid-indigo header, white pill-row sidebar with lavender icon
   chips, hairline-bordered white cards carrying a soft blue-tinted shadow,
   near-square controls and small dense type. See
   reference/DESIGN-SPEC.md for the harvested values.
   Light and dark are both first-class — every colour comes from a token
   below, so np-pro.css can refine the components without re-declaring palettes.
   Everything is scoped to body.tnui so no other panel is affected.
   Sizes are the reference screenshot measured at its 900px layout width.

   NOTE ON TOKEN NAMES: --tn-lime / --tn-on-lime / --tn-deep survive from the old
   Destiny green skin and now hold indigo values. Renaming them would touch
   every other stylesheet for no visual gain, so they are aliases — read the
   value, not the name.
   ========================================================================== */

body.tnui {
  /* ── brand ────────────────────────────────────────────────────────── */
  --tn-lime: #5B4DA4;          /* reseller indigo — highlights, glows, fills */
  --tn-lime-2: #7B6BC4;
  --tn-deep: #3E3477;          /* deep indigo */
  --tn-primary: #5B4DA4;       /* action fill + links: 6.90:1 with white text */
  --tn-primary-h: #493E83;
  --tn-on-primary: #ffffff;    /* text on --tn-primary, flips in dark mode */
  --tn-on-lime: #ffffff;       /* text on the bright indigo surfaces */
  --tn-orange: #8F6E14;
  --tn-red: #C04545;
  --tn-green: #478040;
  --tn-sky: #3E6EA1;     /* sky badge / link ink: 5.32:1 with white on it */

  /* status colours, both roles. style.css's :root carries GitHub's dark
     palette and body.light only half-replaces it, so the panels pin the pair
     themselves: --green/--red/--yellow are solid fills that keep white ink
     above 4.5:1, and the --*-light names are the ink used on a surface.
     The reference panel ships #81b677 / #e66868 / #d2ba63 under white ink,
     which is 2.36:1 / 2.60:1 / 2.10:1 — a real WCAG failure we are not
     copying. Same hue family, darkened until the white label clears 4.5:1. */
  --green:        #478040;   /* white ink on it: 4.81:1 */
  --green-light:  #3D6E37;   /* on the light card:   6.31:1 */
  --red:          #C04545;   /* white ink on it: 5.03:1 */
  --red-light:    #B3352B;   /* on the light card:   6.07:1 */
  --yellow:       #8F6E14;   /* white ink on it: 4.76:1 */
  --yellow-light: #7A5E10;   /* on the light card:   5.94:1 */

  /* legacy names kept as aliases: np-tn.css below still refers to them */
  --tn-blue: var(--tn-primary);
  --tn-blue-h: var(--tn-primary-h);

  /* ── surfaces (light) ──────────────────────────────────────────────── */
  /* the reference runs a pure #fff page under #fff cards and leans on the
     hairline + blue-tinted shadow alone. One step of lavender keeps the same
     flat look while still telling card from canvas at a glance. */
  --tn-page: #F6F9FB;
  --tn-card: #ffffff;
  --tn-ink: #332E38;
  --tn-ink-2: #56566A;
  --tn-menu: #0E0C18;
  --tn-muted: #6E6E85;   /* 4.96:1 on white; the reference's #75758d is 4.48:1 */
  --tn-line: #E6E5EF;
  --tn-ctrl: #D5D5DE;     /* the reference uses a darker hairline on controls,
                             table grids and inputs than it does on cards */
  --tn-stripe: #EBEAF4;
  --tn-table-ink: #56566A; /* its cell ink is cooler and lighter than body ink */
  --tn-band: #5B4DA4;    /* flat solid indigo, exactly like .app-hero-header */
  --tn-pill: linear-gradient(92deg, #6B5BB8 0%, #5B4DA4 100%);
  --tn-shadow: 0 2px 6px rgba(40, 90, 185, .10);
  --tn-shadow-lg: 0 6px 22px rgba(40, 90, 185, .16);
  --tn-radius: 8px;      /* the reference card radius (0.5rem) */
  --tn-radius-sm: 3px;   /* its controls are 0.15rem — deliberately square */
  --tn-glass: rgba(255, 255, 255, .78);
  --tn-scrim: rgba(17, 16, 24, .48);

  /* ── derived parts used by shell + components ─────────────────────── */
  --tn-av-bg: linear-gradient(140deg, #6B5BB8 0%, #4A3E86 100%);
  --tn-on-av: rgba(255, 255, 255, .94);
  --tn-tint-bg: #F3F0FF;   --tn-tint-ink: #4A3E86;
  --tn-ok-bg: #E6F0E4;     --tn-ok-ink: #3D6E37;   --tn-ok-line: #CDE2C9;
  --tn-plum-bg: #F0EFF7;   --tn-plum-ink: #4A3E86;
  --tn-bad-bg: #FCEBEB;    --tn-bad-ink: #A83A3A;  --tn-bad-line: #F5C3C3;
  --tn-warn-bg: #FBF9F1;   --tn-warn-ink: #7A5E10; --tn-warn-line: #EDE3C1;

  /* Action-button hues measured straight off the reference screenshots
     (My Profile / Activity Log / Logout, and its Export button). It sets
     white ink on all three — white on #81B677 is 2.36:1, which fails AA —
     so we keep its exact hues and move the ink to the dark side instead. */
  --tn-green-fill: #81B677;
  --tn-gold-fill: #D2BA63;
  --tn-red-fill: #E97777;
  --tn-on-fill: #14121F;
  --tn-support-bg: #F3F2F9;

  /* the shared components read these */
  --bg-primary: var(--tn-page);
  --bg-secondary: #ffffff;
  --bg-tertiary: #F2F1F8;
  --bg-card: #ffffff;
  --bg-hover: #F3F0FF;
  --border: #E6E5EF;
  --accent: var(--tn-primary);
  --accent-hover: var(--tn-primary-h);
  --accent-glow: rgba(91, 77, 164, .22);
  --text-primary: var(--tn-ink);
  --text-secondary: #56566A;
  --text-muted: var(--tn-muted);
  --radius: var(--tn-radius);
  --radius-lg: 10px;
  --shadow: var(--tn-shadow-lg);

  /* the reference ships no webfont at all — plain system UI. Dropping Plus
     Jakarta Sans is a real part of "poora look replace": the flat, slightly
     generic system face is what makes those panels read as a reseller console
     rather than a branded product. Jakarta stays as a fallback for the odd
     machine with no Segoe/Roboto. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  /* phones must not blow long text blocks up (the layout is scaled on purpose) */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--tn-page);
  color: var(--tn-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.tnui.tn-dark {
  /* ── surfaces (dark) — same hierarchy, indigo-tinted graphite ──────── */
  --tn-primary: #9C8FE0;
  --tn-primary-h: #B0A5EA;
  --tn-on-primary: #14102A;
  --tn-on-lime: #14102A;
  --tn-orange: #E0B85C;
  --tn-red: #F0807A;
  --tn-green: #8FD08A;
  --tn-sky: #8FB4E0;

  /* the fills stay deep; only the ink brightens, so text and status icons read
     against the indigo-black card instead of disappearing into it. */
  --green-light:  #8FD08A;   /* on the dark card: 9.4:1 */
  --red-light:    #F0807A;   /* on the dark card: 6.6:1 */
  --yellow-light: #E0B85C;   /* on the dark card: 9.1:1 */
  --tn-page: #0B0A12;
  --tn-card: #141221;
  --tn-ink: #E8E6F2;
  --tn-ink-2: #C6C2DA;
  --tn-menu: #DAD6EC;
  --tn-muted: #9A95B4;
  --tn-line: #262239;
  --tn-ctrl: #322C4C;
  --tn-stripe: #1A1729;
  --tn-table-ink: #C6C2DA;
  --tn-band: #2E2857;   /* flat deep indigo, the dark twin of .app-hero-header */
  --tn-pill: linear-gradient(92deg, #A99CE8 0%, #8C7DD8 100%);
  --tn-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  --tn-shadow-lg: 0 6px 22px rgba(0, 0, 0, .50);
  --tn-glass: rgba(20, 18, 33, .78);
  --tn-scrim: rgba(0, 0, 0, .62);
  --tn-av-bg: linear-gradient(140deg, #6B5BB8 0%, #3E3477 100%);
  --tn-on-av: rgba(255, 255, 255, .94);
  --tn-tint-bg: #221D3D;   --tn-tint-ink: #C4B8F0;
  --tn-ok-bg: #16281A;     --tn-ok-ink: #8FD79A;   --tn-ok-line: #274A2E;
  --tn-plum-bg: #221D3D;   --tn-plum-ink: #C4B8F0;
  --tn-bad-bg: #2E1618;    --tn-bad-ink: #F5A3A0;  --tn-bad-line: #4E2427;
  --tn-warn-bg: #2C2312;   --tn-warn-ink: #EBC97B; --tn-warn-line: #4C3D1C;
  /* dark mode keeps the same three hues but deepens them, because the
     measured pastels would glow against an indigo-black card */
  --tn-green-fill: #2F5B32; --tn-gold-fill: #6A5318; --tn-red-fill: #6E2B2B;
  --tn-on-fill: #EDE9F7;
  --tn-support-bg: #1A1729;
  --bg-secondary: #1A1729;
  --bg-tertiary: #201C31;
  --bg-card: #141221;
  --bg-hover: #221D3D;
  --border: #262239;
  --accent-glow: rgba(156, 143, 224, .20);
  --text-secondary: #C6C2DA;
}

/* ── header row ─────────────────────────────────────────────────────── */
/* The reference's .app-header is a flat solid-indigo bar, 50px tall, sticky,
   with a soft dark halo instead of a border. Same treatment here — the seam
   between this bar and the hero band below is deliberately invisible because
   both are the same indigo, exactly as it is over there. */
.tnui .tn-top {
  position: sticky; top: 0; z-index: 30;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 19px 0 12px; background: var(--tn-band);
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}
.tnui .tn-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tnui .tn-logo { height: 32px; width: auto; display: block; cursor: pointer; }
.tnui .tn-burger {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer; padding: 0; opacity: .95;
}
.tnui .tn-burger svg { width: 18px; height: 18px; }
.tnui .tn-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
/* .header-icon over there is a bare 30px white glyph in a 50px-radius box — no
   ring, no fill. The bordered 40px circles this panel had were the one part of
   the old chrome that fought the flat look, so they are gone; the hover wash
   and the 44px hit area stay, so it is still a comfortable target. */
.tnui .tn-tool {
  width: 30px; height: 30px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; font-weight: 700; cursor: pointer; padding: 0;
  position: relative; transition: background .15s;
}
.tnui .tn-tool::before { content: ""; position: absolute; inset: -7px; }
.tnui .tn-tool:hover { background: rgba(255, 255, 255, .14); }
.tnui .tn-tool svg { width: 17px; height: 17px; }
.tnui .tn-avatar {
  width: 34px; height: 34px; border-radius: 50px; background: var(--tn-av-bg); border: 0; cursor: pointer;
  margin: 0 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.tnui .tn-avatar svg { width: 20px; height: 20px; color: var(--tn-on-av); }

/* ── blue band with title + breadcrumb ─────────────────────────────── */
.tnui .tn-band {
  background: var(--tn-band); color: #fff; margin-top: -1px;
  padding: 26px 24px 95px 23px;
}
.tnui .tn-band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.tnui .tn-title { font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0 0 7px; color: #fff; letter-spacing: .1px; }
.tnui .tn-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 13px; color: #fff; }
.tnui .tn-crumb span { cursor: default; }
.tnui .tn-crumb span.lnk { cursor: pointer; }
.tnui .tn-crumb span.lnk:hover { text-decoration: underline; }
/* opacity multiplied into the crumb's white and pushed the 12px separator under
   4.5:1 on the band; the smaller size alone carries the hierarchy now */
.tnui .tn-crumb i.sep { font-style: normal; display: inline-block; margin: 0 11px 0 12px; font-size: 12px; transform: scaleY(1.15); }
.tnui .tn-acts { display: flex; gap: 0; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding-top: 6px; }
.tnui .tn-acts .btn, .tnui .tn-acts button {
  min-width: 40px; height: 38px; border-radius: 0; padding: 0 12px; font-size: 14px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; box-shadow: none;
}
.tnui .tn-acts > :first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.tnui .tn-acts > :last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.tnui .tn-acts > * + * { margin-left: 0; }
.tnui .tn-acts.gap { gap: 8px; }
.tnui .tn-acts.gap > * { border-radius: var(--tn-radius-sm) !important; }
.tnui .tn-acts .btn-danger { background: var(--tn-red) !important; }
.tnui .tn-acts .btn-primary, .tnui .tn-acts .btn-blue { background: var(--tn-blue) !important; }
.tnui .tn-acts .tn-txt { font-size: 13px; font-weight: 500; padding: 0 12px; height: 34px; border-radius: var(--tn-radius-sm) !important; }

/* ── content area (cards overlap the band) ─────────────────────────── */
.tnui .tn-main { flex: 1; margin-top: -59px; padding: 0 20px 25px; position: relative; z-index: 2; }
.tnui .tn-main #page-content { padding: 0; }
/* .app-footer is not a full-bleed strip over there — it is a small floating
   card: indigo ink, 8px radius, the same hairline-and-shadow treatment as every
   other card, inset from the page edges. Copied directly. */
.tnui .tn-foot {
  background: var(--tn-card); text-align: center; margin: 0 24px 14px; padding: 8px 16px;
  font-size: 11.5px; color: var(--tn-primary); font-weight: 600;
  border: 1px solid var(--tn-line); border-radius: 8px; box-shadow: var(--tn-shadow);
}
.tnui .tn-foot b { color: var(--tn-ink); font-weight: 700; }
.tnui .tn-fab {
  position: fixed; right: 19px; bottom: 30px; z-index: 40; width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: var(--tn-pill); color: var(--tn-on-lime); cursor: pointer;
  display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(91, 77, 164,.42);
}
.tnui .tn-fab.show { display: inline-flex; }
.tnui .tn-fab svg { width: 20px; height: 20px; }
/* the AI assistant bubble sits above the scroll-to-top button */
.tnui .nx-ai-fab { bottom: 92px !important; right: 18px !important; width: 54px !important; height: 54px !important; }

/* hide the old shell pieces other scripts still look for */
.tnui #breadcrumb, .tnui .tn-hidden { display: none !important; }

/* ── slide-out menu drawer ─────────────────────────────────────────── */
.tnui .tn-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 243px; z-index: 60; background: var(--tn-card);
  transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; overflow-x: hidden;
  box-shadow: 2px 0 18px rgba(15, 23, 42, .08); padding-bottom: 30px;
}
.tnui .tn-drawer.open { transform: translateX(0); }
.tnui .tn-dim {
  position: fixed; inset: 0; z-index: 55; background: rgba(17, 24, 39, .5); opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.tnui .tn-dim.show { opacity: 1; pointer-events: auto; }
.tnui .tn-me { text-align: center; padding: 8px 12px 12px; }
.tnui .tn-me-av {
  width: 60px; height: 60px; border-radius: 50%; background: var(--tn-av-bg); margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tnui .tn-me-av svg { width: 32px; height: 32px; color: var(--tn-on-av); }
.tnui .tn-me-name { font-size: 13.5px; font-weight: 600; color: var(--tn-menu); line-height: 1.3; word-break: break-all; }
.tnui .tn-me-role { font-size: 12.5px; color: var(--tn-muted); margin-top: 2px; }

.tnui .tn-nav { padding: 6px 10px 0; }
/* The reference sidebar is the single most recognisable thing about that panel:
   white ground, every row a full 50px pill with 7px padding, and the glyph
   living in its own 36px lavender chip that flips to white-on-indigo on hover
   and to solid indigo on the current page. Reproduced exactly — the chip is the
   inline <svg> itself, which takes CSS padding and background like any box. */
.tnui .tn-item {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px; margin: 0 0 1px;
  color: var(--tn-menu); font-size: 14px; font-weight: 400; cursor: pointer; user-select: none;
  border-radius: 50px; position: relative; transition: background .2s, color .2s;
}
.tnui .tn-item:hover { color: var(--tn-menu); background: var(--tn-tint-bg); }
.tnui .tn-item svg.ic {
  width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.6;
  /* style.css sets * { box-sizing: border-box }, which would swallow the
     padding into the 18px box and leave an 0px glyph — the chip has to be
     content-box for the 36px lavender square to actually exist. */
  box-sizing: content-box; padding: 9px; background: var(--tn-tint-bg); border-radius: 50px; color: var(--tn-primary);
  transition: background .2s, color .2s, transform .2s;
}
.tnui .tn-item:hover svg.ic { background: var(--tn-card); transform: scale(1.1); }
.tnui .tn-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.tnui .tn-item .chev { width: 14px; height: 14px; flex-shrink: 0; padding: 0; background: none; transition: transform .2s; opacity: .8; }
.tnui .nav-item, .tnui .nav-item.active { border-left: 0; background: none; }
.tnui .tn-item.nav-item.active { color: var(--tn-primary); background: var(--tn-tint-bg); }
.tnui .tn-item.nav-item.active svg.ic { background: var(--tn-primary); color: #fff; transform: none; }
.tnui .tn-group.open > .tn-item {
  background: var(--tn-tint-bg); color: var(--tn-menu); font-weight: 700; box-shadow: none;
}
.tnui .tn-group.open > .tn-item svg.ic { background: var(--tn-card); color: var(--tn-primary); }
.tnui .tn-group.open > .tn-item .chev { transform: rotate(90deg); }
.tnui .tn-subs { display: none; padding: 4px 0 6px; }
.tnui .tn-group.open > .tn-subs { display: block; }
.tnui .tn-sub {
  display: flex; align-items: center; gap: 0; height: 38px; padding: 0 12px 0 28px; font-size: 13.5px; color: var(--tn-ink-2);
  cursor: pointer; white-space: nowrap; border-radius: 50px;
}
.tnui.tn-dark .tn-sub { color: var(--tn-ink-2); }
.tnui .tn-sub::before { content: "\00bb"; color: var(--tn-muted); font-size: 14px; width: 23px; flex-shrink: 0; }
.tnui .tn-sub:hover { background: var(--tn-tint-bg); color: var(--tn-menu); }
.tnui .tn-sub.active { color: var(--tn-primary); background: var(--tn-tint-bg); font-weight: 600; }
/* .menu-title over there is an indigo section caption sitting on a hairline —
   that is what these two are for. */
.tnui .tn-nav-sep { height: 1px; background: var(--tn-line); margin: 10px 0 10px 18px; }
.tnui .tn-nav-cap { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tn-primary); font-weight: 600; padding: 8px 18px 8px 14px; border-top: 1px solid var(--tn-line); margin-top: 8px; }

/* wide screens: the menu stays docked on the left */
@media (min-width: 1200px) {
  .tnui .tn-drawer { transform: none; box-shadow: none; border-right: 1px solid var(--tn-line); }
  .tnui.tn-docked-off .tn-drawer { transform: translateX(-100%); }
  .tnui .tn-shell { margin-left: 243px; transition: margin .25s; }
  .tnui.tn-docked-off .tn-shell { margin-left: 0; }
  .tnui .tn-dim { display: none; }
}
.tnui .tn-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ── profile dropdown ──────────────────────────────────────────────── */
.tnui .tn-prof {
  position: absolute; top: 60px; right: 62px; z-index: 70; width: 248px; background: var(--tn-card);
  border-radius: var(--tn-radius); box-shadow: 0 12px 30px rgba(15, 23, 42, .18); overflow: hidden; display: none;
}
.tnui .tn-prof.show { display: block; }
.tnui .tn-prof-head { background: var(--tn-band); color: #fff; text-align: center; padding: 16px 12px 17px; }
.tnui .tn-prof-head .tn-me-av { width: 65px; height: 65px; margin-bottom: 11px; }
.tnui .tn-prof-name { font-size: 16px; font-weight: 700; line-height: 1.25; word-break: break-all; }
.tnui .tn-prof-role { font-size: 12.5px; margin-top: 5px; opacity: .95; }
.tnui .tn-prof a {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 42px; font-size: 13px; color: var(--tn-ink-2);
  cursor: pointer; text-decoration: none; border-top: 1px solid var(--tn-line);
}
.tnui .tn-prof a:hover { background: var(--bg-hover); color: var(--tn-blue); }
.tnui .tn-prof a svg { width: 14px; height: 14px; color: var(--tn-muted); }

/* ══ generic page parts ══════════════════════════════════════════════ */
.tnui .card {
  background: var(--tn-card); border: 0; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow);
  padding: 21px 20px; margin-bottom: 25px; color: var(--tn-ink);
}
.tnui .card:hover { transform: none; }
.tnui .card-title { font-size: 13px; font-weight: 700; color: var(--tn-ink); }
.tnui .tn-card-head {
  display: flex; align-items: center; justify-content: space-between; margin: -3px 0 14px; min-height: 18px;
}
.tnui .tn-card-head .t { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--tn-ink); letter-spacing: .1px; }
.tnui .tn-card-head .sub { font-size: 13px; color: var(--tn-muted); margin-top: 11px; font-weight: 400; text-transform: none; }
.tnui .tn-dots { color: var(--tn-muted); font-size: 16px; letter-spacing: 1px; line-height: 1; cursor: default; user-select: none; }
/* .page-header is hidden because the plate above already carries the page
   title — np-tn.js lifts its .page-subtitle into the plate's lead slot so the
   description line survives. .zp-desc is a card's own description rather than a
   duplicate of the heading, so it stays visible as a quiet sub-line. */
.tnui .page-header { display: none !important; }
.tnui .zp-desc {
  display: block !important; margin: -2px 0 12px;
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--tn-muted);
}
.tnui .zp-card-head .card-title { display: none; }
.tnui .zp-card-head { margin-bottom: 0; min-height: 0; }
.tnui .zp-card-head:empty { display: none; }

.tnui .btn { border-radius: var(--tn-radius-sm); font-family: inherit; font-weight: 500; }
.tnui .btn-primary { background: var(--tn-blue) !important; color: #fff !important; border: 0; }
.tnui .btn-primary:hover { background: var(--tn-blue-h) !important; }
.tnui .btn-warning { background: var(--tn-orange) !important; color: #fff !important; border: 0; }
.tnui .btn-danger { background: var(--tn-red) !important; color: #fff !important; border: 0; }
.tnui .btn-success { background: var(--tn-green) !important; color: #fff !important; border: 0; }
.tnui .btn-outline { background: var(--tn-card); color: var(--tn-ink-2); border: 1px solid var(--border); }
.tnui .btn i.fas, .tnui .btn i.fa-solid { font-family: "Font Awesome 6 Free"; }

.tnui input:not([type]), .tnui input[type=text], .tnui input[type=number], .tnui input[type=email], .tnui input[type=password],
.tnui input[type=date], .tnui input[type=datetime-local], .tnui input[type=search], .tnui select, .tnui textarea {
  background: var(--tn-card); border: 1px solid var(--border); border-radius: var(--tn-radius-sm); color: var(--tn-ink);
  font-family: inherit; font-size: 13px; padding: 8px 12px; min-height: 36px; box-shadow: none; outline: none;
}
.tnui.tn-dark input, .tnui.tn-dark select, .tnui.tn-dark textarea { border-color: var(--border); }
.tnui input:focus, .tnui select:focus, .tnui textarea:focus { border-color: var(--tn-lime); box-shadow: 0 0 0 3px rgba(91, 77, 164,.24); }
.tnui input::placeholder, .tnui textarea::placeholder { color: var(--tn-muted); }
.tnui .form-label { font-size: 13px; font-weight: 400; color: var(--tn-ink); margin-bottom: 7px; }

/* ── reference data table kit ──────────────────────────────────────── */
.tnui .zp-toolbar.tn-tb { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 0 0 10px; }
.tnui .tn-tb .tn-show { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tn-ink); }
.tnui .tn-tb .tn-show select { min-width: 70px; width: 70px; height: 32px; min-height: 32px; padding: 4px 8px; }
.tnui .tn-tb .tn-exp { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.tnui .tn-tb .tn-exp button {
  background: var(--tn-blue); color: #fff; border: 0; border-radius: 5px; font-size: 13px; font-weight: 700;
  height: 29px; padding: 0 8px; cursor: pointer; font-family: inherit;
}
.tnui .tn-tb .tn-exp button:hover { background: var(--tn-blue-h); }
.tnui .tn-tb .tn-srch { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tn-ink); }
.tnui .tn-tb .tn-srch input { width: 155px; height: 29px; min-height: 29px; padding: 3px 8px; border-radius: 5px; }
.tnui .zp-colvis { display: none; }

.tnui .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tnui table.zp-table, .tnui .tn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--tn-ink); background: transparent; }
.tnui .zp-table thead th, .tnui .tn-table thead th {
  background: transparent; color: var(--tn-ink); font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0; padding: 12px 12px; text-align: left; vertical-align: middle;
  border: 1px solid var(--tn-line); border-top: 0; white-space: nowrap; position: relative;
}
.tnui .zp-table thead th:first-child, .tnui .tn-table thead th:first-child { border-left: 0; }
.tnui .zp-table thead th:last-child, .tnui .tn-table thead th:last-child { border-right: 0; }
.tnui .zp-table tbody td, .tnui .tn-table tbody td {
  padding: 13px 12px; border: 0; border-bottom: 1px solid var(--tn-line); vertical-align: middle; font-size: 12.5px;
  color: var(--tn-ink); background: transparent;
}
.tnui .zp-table tbody tr:nth-child(odd) td, .tnui .tn-table.striped tbody tr:nth-child(odd) td { background: var(--tn-stripe); }
.tnui .zp-table tbody tr:hover td { background: var(--tn-stripe); }
/* the empty cell keeps the row's own background; its look lives in np-pro.css §4c
   ("empty states"), which is the only place that shapes it now — rules here outrank
   that block on specificity, so anything left in this file silently wins the fight. */
.tnui .zp-table tbody td.empty-state, .tnui .tn-table td.tn-empty { background: var(--tn-stripe) !important; }
.tnui .zp-table th.zp-sort { padding-right: 24px; }
.tnui .zp-table th.zp-sort::before, .tnui .zp-table th.zp-sort::after {
  content: ""; position: absolute; right: 9px; width: 0; height: 0; opacity: .3; background: none;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.tnui .zp-table th.zp-sort::before { top: calc(50% - 6px); border-bottom: 4px solid var(--tn-ink); }
.tnui .zp-table th.zp-sort::after { top: calc(50% + 2px); transform: none; border-top: 4px solid var(--tn-ink); border-bottom: 0; }
.tnui .zp-table th.zp-sort.asc::before { opacity: .9; }
.tnui .zp-table th.zp-sort.desc::after { opacity: .9; }
.tnui .zp-table th.zp-sort.asc::after, .tnui .zp-table th.zp-sort.desc::before { opacity: .15; }
.tnui .zp-table tfoot td { background: transparent; border-top: 1px solid var(--tn-line); font-weight: 400; padding: 12px; }
.tnui .zp-table .zp-tot-head { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--tn-ink); }
.tnui .zp-table input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--tn-blue); }
.tnui .zp-table .monospace { font-family: inherit; }
.tnui .zp-table .text-success { color: inherit; font-family: inherit; }
.tnui .tn-na { color: var(--tn-orange); font-weight: 500; }

.tnui .zp-foot { border-top: 0; margin-top: 14px; padding-top: 0; align-items: flex-start; }
.tnui .zp-info { font-size: 12.5px; color: var(--tn-ink); }
.tnui .zp-info b { font-weight: 400; }
.tnui .zp-pager { gap: 0; margin-left: auto; }
.tnui .zp-pager button {
  min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--tn-line); border-radius: 0; margin-left: -1px;
  background: var(--tn-card); color: var(--tn-muted); font-size: 12px; box-shadow: none;
}
.tnui .zp-pager button.active { background: var(--tn-blue); border-color: var(--tn-blue); color: #fff; }
.tnui .zp-pager button:disabled { opacity: 1; color: var(--tn-muted); }
.tnui .zp-pager button:first-child { border-radius: 5px 0 0 3px; }
.tnui .zp-pager button:last-child { border-radius: 0 3px 3px 0; }

/* row action buttons: blue X / blue eye / orange pencil / red trash */
.tnui .zp-actions { gap: 0; }
.tnui .zp-actions .btn, .tnui .tn-rowbtns .btn {
  width: 30px; height: 26px; padding: 0; border-radius: 0; border: 0 !important; color: #fff !important; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tnui .zp-actions .btn:first-child { border-radius: 5px 0 0 3px; }
.tnui .zp-actions .btn:last-child { border-radius: 0 3px 3px 0; }
.tnui .zp-actions .btn i { color: #fff !important; }
.tnui .zp-actions .btn-outline, .tnui .zp-actions .zp-btn-blue, .tnui .zp-actions .zp-btn-cyan, .tnui .zp-actions .btn-primary { background: var(--tn-blue) !important; }
.tnui .zp-actions .btn-warning { background: var(--tn-orange) !important; }
.tnui .zp-actions .btn-danger { background: var(--tn-red) !important; }
.tnui .tn-req {
  background: var(--tn-blue); color: #fff; border: 0; border-radius: 5px; font-size: 12.5px; font-weight: 700;
  height: 35px; padding: 0 12px; cursor: pointer; font-family: inherit; letter-spacing: .2px;
}
.tnui .tn-req:disabled { opacity: .55; cursor: default; }

/* filter panels: plain boxes with placeholders, no labels */
.tnui .zp-filters-card { margin-bottom: 25px !important; }
.tnui .zp-filters { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; grid-template-columns: none; }
.tnui .zp-filters .form-group { margin: 0; width: 165px; }
.tnui .zp-filters .btn-danger, .tnui .zp-filters .btn-outline { background: var(--tn-blue) !important; color: #fff !important; border: 0; height: 38px; font-weight: 700; width: auto !important; padding: 0 16px; }
.tnui .zp-filters .form-group:has(> .btn) { width: auto; }
.tnui .zp-filters .form-group .form-label { display: none; }
.tnui .zp-filters input { width: 100%; height: 34px; min-height: 34px; }
.tnui .zp-sel-btn { background: var(--tn-card); border: 1px solid var(--border); border-radius: var(--tn-radius-sm); min-height: 34px; padding: 6px 12px; font-size: 13px; color: var(--tn-ink); }
.tnui .zp-sel-btn .zp-ph { color: var(--tn-muted); }
.tnui .zp-sel-btn i { font-size: 9px; color: var(--tn-muted); }
.tnui .zp-sel-opt:hover, .tnui .zp-sel-opt.on { background: var(--tn-blue); }
.tnui .zp-groupby { margin-top: 8px; gap: 6px 14px; }
.tnui .zp-groupby .zp-gb-title { font-size: 13px; font-weight: 700; color: var(--tn-ink); }
.tnui .zp-groupby label { font-size: 13px; gap: 5px; }
.tnui .zp-groupby input { width: 13px; height: 13px; }
.tnui .zp-filter-actions { margin-top: 10px; gap: 4px; }
.tnui .zp-filter-actions .btn, .tnui .tn-btn {
  height: 38px; padding: 0 16px; font-size: 13px; font-weight: 700; border-radius: var(--tn-radius-sm); border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: inherit;
}
.tnui .zp-filter-actions .btn i { display: none; }
.tnui .tn-btn.blue { background: var(--tn-blue); color: #fff; }
.tnui .tn-btn.orange { background: var(--tn-orange); color: #fff; }
.tnui .tn-btn.blue:hover { background: var(--tn-blue-h); }

/* modal */
.tnui .modal-overlay { background: rgba(17, 24, 39, .5); z-index: 90; }
.tnui .modal { background: var(--tn-card); border: 0; border-radius: var(--tn-radius); color: var(--tn-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.tnui .modal-header { border-bottom: 0; padding: 20px 22px 8px; }
.tnui .modal-header h3 { font-size: 19px; font-weight: 500; color: var(--tn-ink); }
.tnui .modal-body { padding: 14px 22px 22px; }
.tnui .form-actions .btn, .tnui .modal .btn { height: 38px; padding: 0 16px; font-size: 13px; }
.tnui .modal .btn-outline { background: transparent; border: 0; color: var(--tn-ink); }

.tnui .toast { background: var(--tn-card); color: var(--tn-ink); border: 1px solid var(--tn-line); box-shadow: 0 10px 25px rgba(15, 23, 42, .12); }
.tnui .alert-success, .tnui .zp-alert.alert-success { background: var(--tn-ok-bg); color: var(--tn-ok-ink); border: 1px solid var(--tn-ok-line); border-radius: var(--tn-radius-sm); padding: 11px 14px; }
.tnui .alert-danger, .tnui .zp-alert.alert-danger { background: var(--tn-bad-bg); color: var(--tn-bad-ink); border: 1px solid var(--tn-bad-line); border-radius: var(--tn-radius-sm); padding: 11px 14px; }
.tnui .empty-state { color: var(--tn-muted); }
.tnui .spinner { border-color: var(--tn-line); border-top-color: var(--tn-blue); }
.tnui .badge { border-radius: 5px; font-weight: 500; }

/* ══ DASHBOARD ═══════════════════════════════════════════════════════ */
.tnui .tn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; margin-bottom: 25px; }
.tnui .tn-stat { display: flex; align-items: center; gap: 25px; padding: 14px 17px 13px; margin: 0; }
.tnui .tn-stat-ic {
  width: 60px; height: 60px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.tnui .tn-stat-ic svg { width: 32px; height: 32px; stroke-width: 1.7; }
/* The reference panel never paints an icon chip with a saturated gradient —
   every one of its surfaces is a soft --bs-*-bg-subtle tint carrying the
   matching emphasis colour (see DESIGN-SPEC.md "Palette"). The four slots
   follow that exactly. Because the tints are light, the glyph ink clears the
   3:1 non-text floor by a wide margin, where the old white-on-gradient glyphs
   sat at 3.4:1. Dark mode is automatic: all four read from tokens. */
.tnui .tn-stat-ic.pink   { background: var(--tn-tint-bg); color: var(--tn-tint-ink); }
.tnui .tn-stat-ic.blue   { background: #E2EBF5;           color: var(--tn-sky); }
.tnui .tn-stat-ic.green  { background: var(--tn-ok-bg);   color: var(--tn-ok-ink); }
.tnui .tn-stat-ic.orange { background: var(--tn-warn-bg); color: var(--tn-warn-ink); }
.tnui .tn-stat-bd { flex: 1; min-width: 0; }
.tnui .tn-stat-t { font-size: 13.5px; font-weight: 500; color: var(--tn-ink); margin-bottom: 8px; }
.tnui .tn-stat-r { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--tn-ink-2); line-height: 1.75; }
.tnui .tn-stat-r b { font-weight: 700; color: var(--tn-ink); font-size: 12.5px; }

.tnui .tn-news-item + .tn-news-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tn-line); }
.tnui .tn-news-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 2px 0 16px 0; }
.tnui .tn-news-h b { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--tn-ink); }
.tnui .tn-news-h i { font-size: 13.5px; color: var(--tn-ink-2); white-space: nowrap; }
.tnui .tn-news-body { font-size: 13px; color: var(--tn-ink-2); line-height: 1.55; white-space: pre-line; word-break: break-word; }
.tnui .tn-news-body p { margin: 0 0 12px; }
.tnui .tn-news-empty { color: var(--tn-muted); font-size: 13px; padding: 6px 0; }
.tnui .tn-news-list { max-height: 900px; overflow-y: auto; margin-right: -12px; padding-right: 10px; }

.tnui .tn-rng { margin: 0 -8px 0 -8px; }
.tnui .tn-rng-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; color: var(--tn-ink); padding: 11px 12px 14px; border-bottom: 1px solid var(--tn-line); border-top: 1px solid var(--tn-line); }
.tnui .tn-rng-row { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 63px; border-bottom: 1px solid var(--tn-line); font-size: 12.5px; color: var(--tn-ink); }
.tnui .tn-rng-row:last-child { border-bottom: 0; }
.tnui .tn-rng-av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--tn-tint-bg); color: var(--tn-tint-ink); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tnui.tn-dark .tn-rng-av { background: var(--tn-tint-bg); color: var(--tn-tint-ink); }
.tnui .tn-chart-box { position: relative; height: 280px; margin: 16px -8px 0 -12px; }

/* minimum-payout progress card (kept from the old dashboard) in the light look */
.tnui .nx-po { background: var(--tn-card) !important; border: 0 !important; border-radius: var(--tn-radius) !important; box-shadow: var(--tn-shadow) !important; margin-bottom: 25px !important; }
.tnui .nx-po::after { display: none; }
.tnui .nx-po.done { background: var(--bg-hover) !important; }
.tnui .nx-po-title { color: var(--tn-ink) !important; font-size: 13px !important; text-transform: uppercase; }
.tnui .nx-po-sub, .tnui .nx-po-bal small, .tnui .nx-po-foot, .tnui .nx-po-day .d1 { color: var(--tn-muted) !important; }
/* --tn-muted is tuned for the white card (4.96:1). The "minimum reached" state
   lays the whole card out on the lavender tint (--bg-hover, #F3F0FF), and the
   day chip always does, where the same ink measures 4.42:1 — just under AA at
   10.5-13px. Redefining the token on those two boxes lets the existing rules
   cascade the darker value instead of duplicating four selectors. Dark mode is
   deliberately excluded: there --tn-muted is light on a dark tint (5.4:1), and
   #68687F would drop to 2.96:1. */
body.tnui:not(.tn-dark) .nx-po.done, body.tnui:not(.tn-dark) .nx-po-day { --tn-muted: #68687F; }
.tnui .nx-po-ico { background: var(--tn-pill) !important; border: 0 !important; }
.tnui .nx-po-day { background: var(--bg-hover) !important; border: 0 !important; }
.tnui .nx-po-day .d2, .tnui .nx-po-bal { color: var(--tn-ink) !important; }
.tnui .nx-po-day .d3, .tnui .nx-po-pct { color: var(--tn-blue) !important; }
.tnui .nx-po-track { background: var(--tn-line) !important; border: 0 !important; }
.tnui .nx-po-fill { background: var(--tn-pill) !important; box-shadow: none !important; animation: none !important; }

/* reference tables wrap long text instead of scrolling sideways */
.tnui .zp-table th, .tnui .zp-table td { white-space: normal; }
.tnui .zp-table td { word-break: normal; overflow-wrap: break-word; min-width: 60px; }
.tnui .zp-table td.zp-chk, .tnui .zp-table th.zp-chk { min-width: 0; }
.tnui .zp-table .monospace, .tnui .zp-table .fw-600, .tnui .zp-table b, .tnui .zp-table strong { font-weight: 400; font-family: inherit; }
.tnui .zp-table .btn-icon { width: 26px; height: 24px; border-radius: 5px; background: var(--tn-blue); color: #fff; border: 0; }
.tnui .zp-table .btn-icon i { color: #fff; font-size: 10px; }

/* multi-select, inline fields, download buttons */
.tnui .tn-ms { position: relative; }
.tnui .tn-ms-drop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70; background: var(--tn-card);
  border: 1px solid var(--border); border-radius: var(--tn-radius); box-shadow: var(--shadow); padding: 8px; }
.tnui .tn-ms.open .tn-ms-drop { display: block; }
.tnui .tn-ms-drop input[type=text] { width: 100%; margin-bottom: 6px; }
.tnui .tn-ms-list { max-height: 240px; overflow-y: auto; }
.tnui .tn-ms-drop label { display: flex; align-items: center; gap: 8px; padding: 7px 6px; font-size: 13px; cursor: pointer; border-radius: var(--tn-radius-sm); color: var(--tn-ink); }
.tnui .tn-ms-drop label:hover { background: var(--bg-hover); }
.tnui .tn-ms-all { border-bottom: 1px solid var(--tn-line); border-radius: 0 !important; margin-bottom: 4px; font-weight: 600; }
.tnui .tn-inline { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; font-size: 13px; }
.tnui .tn-inline label { margin: 0; white-space: nowrap; }
.tnui .tn-uline { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important;
  min-height: 24px !important; height: 24px; padding: 0 4px !important; width: 165px; }
.tnui .tn-dl { display: flex; gap: 4px; }
.tnui .tn-dl button { width: 30px; height: 26px; border: 0; border-radius: 5px; color: #fff; cursor: pointer; font-size: 11px; }
.tnui .tn-dl .b { background: var(--tn-blue); } .tnui .tn-dl .r { background: var(--tn-red); } .tnui .tn-dl .o { background: var(--tn-orange); }
.tnui .tn-h20 { font-size: 20px; font-weight: 500; color: var(--tn-ink); margin: 6px 0 12px; }
.tnui .tn-btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.tnui .tn-two > div { min-width: 0; }
.tnui .tn-two .zp-toolbar.tn-tb { display: flex; flex-wrap: wrap; justify-content: space-between; }
.tnui .tn-two .tn-tb .tn-exp { order: 3; width: 100%; justify-content: flex-start; }
.tnui .tn-req { white-space: nowrap; }
.tnui .zp-filters .form-group:has(input[type=datetime-local]) { width: 200px; }

/* Add / Edit client: two columns like the reference */
.tnui .modal form:has(#zc-username) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto) auto; grid-auto-flow: column; gap: 0 25px; }
.tnui .modal form:has(#zc-username) .form-actions { grid-column: 1 / -1; grid-row: 6; }
.tnui .modal form:has(#zc-username) .form-group { margin-bottom: 12px; }
.tnui .modal:has(#zc-username) { max-width: 560px; }

/* ══ manager / admin: older page markup in the reference look ══════ */
.tnui .tn-item i.ic { width: 18px; font-size: 15px; text-align: center; flex-shrink: 0; opacity: .9; }
.tnui .tn-band-extra { margin-left: 8px; }
.tnui .tn-acts select.tn-band-extra, .tnui .tn-acts input.tn-band-extra { height: 34px; min-height: 34px; background: var(--tn-card); color: var(--tn-ink); border: 0; }
.tnui .page-content .stats-grid { gap: 25px; margin-bottom: 25px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
.tnui .stat-card, .tnui .stat-card:has(.stat-icon) {
  background: var(--tn-card) !important; border: 1px solid var(--tn-line) !important; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow); color: var(--tn-ink);
}
.tnui .stat-card:hover { transform: none; box-shadow: var(--tn-shadow); }
.tnui .stat-card .stat-label { color: var(--tn-muted); }
.tnui .stat-card .stat-value { color: var(--tn-ink); font-weight: 700; }
.tnui .stat-card .stat-change { color: var(--tn-muted) !important; }
.tnui .stat-card .stat-icon { border-radius: 10px; }
/* Six tile accents, all on the reference's tint-and-emphasis system rather
   than saturated gradients — the class names come from the JS statCard()
   helper and are left alone. Each pair is a --bs-*-bg-subtle style tint with
   its matching emphasis ink, which is how the reseller panel colours every
   chip; the glyph no longer needs white to stay legible. */
.tnui .stat-card .stat-icon.blue   { background: #E2EBF5;          color: var(--tn-sky); }
.tnui .stat-card .stat-icon.green  { background: var(--tn-tint-bg); color: var(--tn-tint-ink); }
.tnui .stat-card .stat-icon.red    { background: var(--tn-bad-bg);  color: var(--tn-bad-ink); }
.tnui .stat-card .stat-icon.yellow { background: var(--tn-warn-bg); color: var(--tn-warn-ink); }
.tnui .stat-card .stat-icon.purple { background: var(--tn-plum-bg); color: var(--tn-plum-ink); }
.tnui .stat-card .stat-icon.cyan   { background: var(--tn-ok-bg);   color: var(--tn-ok-ink); }
.tnui .stat-card .stat-icon i { color: inherit; }
.tnui .table-wrap > table:not(.zp-table) { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tnui .table-wrap > table:not(.zp-table) thead th {
  background: transparent; color: var(--tn-ink); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0;
  padding: 12px; text-align: left; border: 1px solid var(--tn-line); border-top: 0;
}
.tnui .table-wrap > table:not(.zp-table) thead th:first-child { border-left: 0; }
.tnui .table-wrap > table:not(.zp-table) thead th:last-child { border-right: 0; }
.tnui .table-wrap > table:not(.zp-table) tbody td { padding: 12px; border: 0; border-bottom: 1px solid var(--tn-line); color: var(--tn-ink); background: transparent; }
.tnui .table-wrap > table:not(.zp-table) tbody tr:nth-child(odd) td { background: var(--tn-stripe); }
.tnui .card-header { border-bottom: 0; padding: 0; margin-bottom: 14px; }
.tnui .card-header .card-title { text-transform: uppercase; }
.tnui .nx-live-dot { display: none; }

/* ══ test panel pages in the reference look ═════════════════════════ */
.tn-testpanel .page-intro { color: var(--tn-muted); font-size: 13px; margin: 0 0 14px; background: var(--tn-card); padding: 12px 16px; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow); }
.tn-testpanel .panel-box, .tn-testpanel .cdr-panel, .tn-testpanel .chart-box {
  background: var(--tn-card); border: 0; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow); margin-bottom: 25px; overflow: hidden; }
.tn-testpanel .panel-head { background: transparent; border-bottom: 1px solid var(--tn-line); color: var(--tn-ink); font-size: 13px; font-weight: 700;
  text-transform: uppercase; padding: 16px 18px; gap: 10px; flex-wrap: wrap; }
.tn-testpanel .panel-head i { color: var(--tn-blue); }
.tn-testpanel .panel-body { padding: 16px 18px; }
.tn-testpanel .cdr-panel { padding: 18px; }
.tn-testpanel .cdr-row { gap: 10px 14px; }
.tn-testpanel .section-title { color: var(--tn-ink); font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 6px 0 12px; }
.tn-testpanel .section-title i { color: var(--tn-blue); }
.tn-testpanel .counters { gap: 25px; margin-bottom: 25px; }
.tn-testpanel .ctr { background: var(--tn-card) !important; color: var(--tn-ink); border: 1px solid var(--tn-line); border-radius: var(--tn-radius); box-shadow: var(--tn-shadow); padding: 18px; }
/* same tint-and-emphasis chips as the dashboard tiles; the #fff !important that
   used to sit here fought the token ink and pinned every glyph white */
.tn-testpanel .ctr-icon { width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.tn-testpanel .ctr-blue .ctr-icon   { background: #E2EBF5;           color: var(--tn-sky) !important; }
.tn-testpanel .ctr-green .ctr-icon  { background: var(--tn-tint-bg); color: var(--tn-tint-ink) !important; }
.tn-testpanel .ctr-red .ctr-icon    { background: var(--tn-bad-bg);  color: var(--tn-bad-ink) !important; }
.tn-testpanel .ctr-yellow .ctr-icon, .tn-testpanel .ctr-orange .ctr-icon { background: var(--tn-warn-bg); color: var(--tn-warn-ink) !important; }
.tn-testpanel .ctr-label { color: var(--tn-muted); }
.tn-testpanel .ctr-val { color: var(--tn-ink); }
.tn-testpanel .ctr-arrow { color: var(--tn-muted); }
.tn-testpanel .dt-toolbar { gap: 10px; margin-bottom: 10px; }
.tn-testpanel .dt-per-wrap, .tn-testpanel .dt-search-wrap { color: var(--tn-ink); font-size: 13px; }
.tn-testpanel .dt-export button, .tn-testpanel .dt-pager button {
  background: var(--tn-blue); color: #fff; border: 0; border-radius: 5px; font-size: 13px; font-weight: 700; height: 29px; padding: 0 9px; }
.tn-testpanel .dt-pager button { background: var(--tn-card); color: var(--tn-muted); border: 1px solid var(--tn-line); font-weight: 400; border-radius: 0; margin-left: -1px; }
.tn-testpanel .dt-pager button.active { background: var(--tn-blue); border-color: var(--tn-blue); color: #fff; }
.tn-testpanel .dt-pager button:disabled { color: var(--tn-muted); opacity: 1; }
.tn-testpanel table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; background: transparent; }
.tn-testpanel table.dt thead th { background: transparent; color: var(--tn-ink); font-weight: 700; text-transform: uppercase; font-size: 12.5px;
  padding: 12px; border: 1px solid var(--tn-line); border-top: 0; text-align: left; }
.tn-testpanel table.dt thead th:first-child { border-left: 0; } .tn-testpanel table.dt thead th:last-child { border-right: 0; }
.tn-testpanel table.dt tbody td { padding: 12px; border: 0; border-bottom: 1px solid var(--tn-line); color: var(--tn-ink); background: transparent; }
.tn-testpanel table.dt tbody tr:nth-child(odd) td { background: var(--tn-stripe); }
.tn-testpanel .dt-info { color: var(--tn-ink); font-size: 12.5px; }
.tn-testpanel .btn-blue, .tn-testpanel .btn-orange, .tn-testpanel .btn-red, .tn-testpanel .btn-outline-sm {
  height: 36px; padding: 0 14px; border-radius: var(--tn-radius-sm); font-size: 13px; font-weight: 700; border: 0; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.tn-testpanel .btn-blue, .tn-testpanel .btn-red { background: var(--tn-blue); }
.tn-testpanel .btn-orange { background: var(--tn-orange); }
.tn-testpanel .btn-outline-sm { background: var(--tn-card); color: var(--tn-ink-2); border: 1px solid var(--border); font-weight: 500; }
.tn-testpanel .filter-bar { gap: 10px; }
.tn-testpanel .toast-c { z-index: 999; }
.tn-testpanel .quicknav { display: none; }
.tn-testpanel .cdr-chk { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; }
.tn-testpanel .cdr-chk input[type=checkbox] { width: 15px !important; height: 15px; min-height: 0 !important; padding: 0; flex: none; }
@media (max-width: 767px) {
  .tn-testpanel .counters { gap: 14px; margin-bottom: 16px; }
  .tn-testpanel .panel-head, .tn-testpanel .panel-body, .tn-testpanel .cdr-panel { padding: 14px; }
  .tn-testpanel .panel-body { overflow-x: auto; }
  .tn-testpanel table.dt th, .tn-testpanel table.dt td { white-space: nowrap; font-size: 13px; }
  .tn-testpanel .cdr-panel input, .tn-testpanel .cdr-panel select, .tn-testpanel .filter-bar select { width: 100% !important; }
  .tn-testpanel .dt-pager { flex-wrap: wrap; justify-content: center; }
  .tn-testpanel .cdr-row:has(.cdr-chk) { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .tn-testpanel .cdr-row:has(.cdr-chk) .grp-label { width: 100%; }
  .tn-testpanel .cdr-row:has(.cdr-chk) > div { margin-left: 0 !important; width: 100%; }
  .tn-testpanel .cdr-row:has(.cdr-chk) > div button { flex: 1 1 auto; justify-content: center; }
}

/* ── Add Test Number dialog ── */
.tnui #tn-tp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, .5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 12px; overflow-y: auto; }
.tnui #tn-tp-modal .modal { background: var(--tn-card); border-radius: var(--tn-radius); width: 100%; max-width: 540px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.tnui #tn-tp-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.tnui #tn-tp-modal .modal-header h3 { font-size: 19px; font-weight: 500; color: var(--tn-ink); margin: 0; }
.tnui #tn-tp-modal .modal-header button { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--tn-muted); cursor: pointer; }
.tnui #tn-tp-modal .modal-body { padding: 12px 20px 22px; }
.tnui .tn-at-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--tn-line); padding-bottom: 12px; }
.tnui .tn-at-tabs button { border: 1px solid var(--border); background: var(--tn-card); color: var(--tn-ink-2); border-radius: 20px; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.tnui .tn-at-tabs button.on { background: var(--tn-pill); color: var(--tn-on-lime); border-color: transparent; }
.tnui .tn-at-msg { border-radius: var(--tn-radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.tnui .tn-at-msg.ok { background: var(--tn-ok-bg); color: var(--tn-ok-ink); border: 1px solid var(--tn-ok-line); }
.tnui .tn-at-msg.err { background: var(--tn-bad-bg); color: var(--tn-bad-ink); border: 1px solid var(--tn-bad-line); }
.tnui .tn-at-empty { padding: 12px; background: var(--bg-hover); border-radius: var(--tn-radius-sm); font-size: 13px; color: var(--tn-ink-2); }
.tnui .tn-at-empty a { color: var(--tn-blue); cursor: pointer; font-weight: 600; }
.tnui .tn-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px dashed var(--tn-lime); border-radius: var(--tn-radius);
  padding: 26px 14px; margin-bottom: 14px; cursor: pointer; background: var(--bg-tertiary); color: var(--tn-ink); }
.tnui.tn-dark .tn-drop { background: var(--bg-tertiary); border-color: var(--tn-deep); }
.tnui .tn-drop input { display: none; }
.tnui .tn-drop i { font-size: 30px; color: var(--tn-blue); }
.tnui .tn-drop b { font-size: 14px; font-weight: 600; word-break: break-all; }
.tnui .tn-drop span { font-size: 12px; color: var(--tn-muted); }
.tnui .tn-btn:disabled { opacity: .5; cursor: default; }
.tnui .tn-at-profit { font-size: 13px; font-weight: 600; color: var(--tn-ok-ink); background: var(--tn-ok-bg); border-radius: var(--tn-radius-sm); padding: 9px 12px; margin: -2px 0 14px; }
.tnui .tn-at-profit.neg { color: var(--tn-bad-ink); background: var(--tn-bad-bg); }
.tnui .modal:has(.tn-at-tabs), .tnui #tn-tp-modal .modal { max-width: 640px; }
.tn-testpanel .tn-f select, .tn-testpanel .tn-f input, .tn-testpanel .tn-f textarea { width: 100%; }

/* grid children must be allowed to shrink, or one wide table stretches the
   whole page past the phone screen */
.tnui .two-col > *, .tnui .three-col > *, .tnui .charts-grid > *, .tnui .grid-2 > *, .tnui .stats-grid > *,
.tnui .tn-two > *, .tnui .tn-form-grid > *, .tnui .bottom-grid > *, .tnui .counters > * { min-width: 0; }
.tnui .card, .tnui .panel-box { min-width: 0; max-width: 100%; }
.tnui .table-wrap { max-width: 100%; overflow-x: auto; }
.tnui .tn-main, .tnui #page-content, .tnui #main-content { min-width: 0; max-width: 100%; }
.tnui .tn-shell { min-width: 0; overflow-x: hidden; }

/* ══ extra pages ═════════════════════════════════════════════════════ */
.tnui .tn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 25px; }
.tnui .tn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; }
.tnui .tn-f { margin-bottom: 14px; }
.tnui .tn-f label { display: block; font-size: 13px; color: var(--tn-ink); margin-bottom: 7px; }
.tnui .tn-f input, .tnui .tn-f select, .tnui .tn-f textarea { width: 100%; }
.tnui .tn-token { font-size: 20px; font-weight: 500; color: var(--tn-ink); line-height: 1.35; word-break: break-all; margin: 18px 0 22px; }
.tnui .tn-small-h { font-size: 13px; font-weight: 500; color: var(--tn-ink); margin: 0 0 8px; }
.tnui .tn-mini-h { font-size: 12.5px; font-weight: 700; color: var(--tn-ink); margin: 28px 0 14px; }
.tnui .tn-resp {
  background: #07100A; color: #DCEFD8; min-height: 500px; border: 1px solid var(--tn-line); font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px; padding: 12px; white-space: pre-wrap; word-break: break-all; overflow: auto; max-height: 640px;
}
.tnui .tn-url { font-size: 12.5px; color: var(--tn-ink); word-break: break-all; min-height: 40px; line-height: 1.5; margin-bottom: 36px; }
.tnui .tn-bal { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 26px; }
.tnui .tn-bal div { font-size: 22px; padding: 12px 16px; min-width: 240px; color: #10240F; border-radius: var(--tn-radius-sm); }
.tnui .tn-bal .usd { background: linear-gradient(120deg,#F7D97C,#E9B949); }
.tnui .tn-bal .eur { background: linear-gradient(120deg,#B8E98F,#8FD66A); }
.tnui .tn-bal .gbp { background: linear-gradient(120deg,#CFE3F7,#A9C9EE); }

/* ══ PHONES & SMALL TABLETS — real mobile layout ═══════════════════ */
@media (max-width: 767px) {
  body.tnui { font-size: 14px; }
  /* header */
  .tnui .tn-top { height: 56px; padding: 0 10px; }
  .tnui .tn-brand { gap: 6px; }
  .tnui .tn-logo { height: 26px; max-width: 128px; object-fit: contain; object-position: left center; }
  .tnui .tn-burger { width: 34px; height: 34px; }
  .tnui .tn-tools { gap: 5px; }
  .tnui .tn-tool { width: 36px; height: 36px; }
  .tnui .tn-tool svg { width: 16px; height: 16px; }
  .tnui .tn-avatar { width: 34px; height: 34px; margin: 0 1px; }
  .tnui .tn-hide-sm { display: none !important; }
  .tnui .tn-prof { top: 52px; right: 8px; width: calc(100vw - 16px); max-width: 290px; }
  /* band */
  .tnui .tn-band { padding: 16px 14px 70px; }
  .tnui .tn-band-in { grid-template-columns: 1fr; gap: 10px; }
  .tnui .tn-title { font-size: 19px; margin-bottom: 5px; }
  .tnui .tn-crumb { font-size: 12.5px; }
  .tnui .tn-crumb i.sep { margin: 0 8px; }
  .tnui .tn-acts { justify-content: flex-start; padding-top: 0; }
  .tnui .tn-acts .btn, .tnui .tn-acts button { height: 36px; min-width: 38px; font-size: 13px; }
  /* content */
  .tnui .tn-main { margin-top: -56px; padding: 0 12px 20px; }
  .tnui .card { padding: 16px 14px; margin-bottom: 16px; }
  .tnui .tn-stats { grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
  .tnui .tn-stat { gap: 16px; padding: 14px; }
  .tnui .tn-stat-ic { width: 52px; height: 52px; }
  .tnui .tn-stat-ic svg { width: 28px; height: 28px; }
  .tnui .tn-stat-t { font-size: 15px; }
  .tnui .tn-stat-r { font-size: 13.5px; }
  .tnui .tn-stat-r b { font-size: 14px; }
  .tnui .tn-card-head .t, .tnui .tn-news-h b { font-size: 13.5px; }
  .tnui .tn-news-h { flex-wrap: wrap; gap: 4px 12px; }
  .tnui .tn-news-body { font-size: 13.5px; }
  .tnui .tn-rng-row { height: 56px; font-size: 13.5px; }
  .tnui .tn-chart-box { height: 260px; margin: 12px -4px 0 -6px; }
  .tnui .tn-two, .tnui .tn-form-grid { grid-template-columns: 1fr; gap: 0; }
  .tnui .tn-two > div + div { margin-top: 22px; }
  .tnui .tn-h20 { font-size: 18px; }
  .tnui .tn-token { font-size: 16px; }
  .tnui .tn-resp { min-height: 260px; }
  .tnui .tn-bal { gap: 10px; margin-bottom: 18px; }
  .tnui .tn-bal div { min-width: 0; flex: 1 1 100%; font-size: 18px; padding: 10px 14px; }
  /* table toolbar: Show + Search on one line, export buttons under it */
  .tnui .zp-toolbar.tn-tb, .tnui .tn-two .zp-toolbar.tn-tb { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
  .tnui .tn-tb .tn-srch { flex: 1 1 150px; justify-content: flex-end; }
  .tnui .tn-tb .tn-srch input { width: 100%; max-width: 190px; height: 34px; min-height: 34px; }
  .tnui .tn-tb .tn-exp { order: 3; width: 100%; justify-content: flex-start; }
  .tnui .tn-tb .tn-exp button { height: 32px; padding: 0 10px; }
  /* tables scroll sideways instead of turning into tall narrow rows */
  .tnui .table-wrap { margin: 0 -14px; padding: 0 14px; }
  .tnui .zp-table th, .tnui .zp-table td, .tnui .table-wrap > table th, .tnui .table-wrap > table td { white-space: nowrap; font-size: 13px; }
  .tnui .zp-table td { min-width: 0; }
  .tnui .zp-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .tnui .zp-pager { margin-left: 0; justify-content: center; flex-wrap: wrap; }
  /* filters: full-width fields, big tap targets */
  .tnui .zp-filters { gap: 10px; }
  .tnui .zp-filters .form-group, .tnui .zp-filters .form-group:has(input[type=datetime-local]) { width: 100% !important; }
  .tnui .zp-filters > .tn-btn, .tnui .zp-filters > .btn, .tnui .zp-filter-actions .btn, .tnui .zp-filter-actions .tn-btn { flex: 1 1 auto; }
  .tnui input, .tnui select, .tnui textarea { font-size: 16px !important; } /* stops iPhone zooming into fields */
  .tnui .tn-inline { flex-wrap: wrap; }
  .tnui .tn-uline { width: 120px; }
  .tnui .zp-groupby { gap: 8px 14px; }
  /* drawer, buttons */
  .tnui .tn-drawer { width: 270px; max-width: 86vw; }
  .tnui .tn-fab { width: 44px; height: 44px; right: 14px; bottom: 18px; }
  .tnui .nx-ai-fab { bottom: 72px !important; right: 12px !important; width: 50px !important; height: 50px !important; }
  /* modals */
  .tnui .modal-overlay { padding: 10px; align-items: flex-start; }
  .tnui .modal { width: 100%; max-width: 100% !important; max-height: calc(100vh - 20px); overflow-y: auto; margin-top: 10px; }
  .tnui .modal form:has(#zc-username) { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .tnui .modal form:has(#zc-username) .form-actions { grid-row: auto; }
  .tnui .modal-header h3 { font-size: 17px; }
  .tnui .modal:has(.tn-at-tabs), .tnui #tn-tp-modal .modal { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .tnui .modal .tn-at-tabs button { padding: 0 11px; }
  .tnui .modal .table-wrap { margin: 0; padding: 0; overflow-x: auto; }
  /* older manager / admin markup */
  .tnui .page-content .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .tnui .stat-card { padding: 14px; }
  .tnui .stat-card .stat-value { font-size: 22px; }
  .tnui .two-col, .tnui .three-col, .tnui .form-row, .tnui .charts-grid, .tnui .grid-2 { grid-template-columns: 1fr !important; }
  .tnui .form-actions { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .tnui .page-content .stats-grid { grid-template-columns: 1fr !important; }
  .tnui .tn-logo { max-width: 104px; }
  .tnui .tn-tool { width: 34px; height: 34px; }
}
@media print {
  .tnui .tn-top, .tnui .tn-band, .tnui .tn-drawer, .tnui .tn-foot, .tnui .tn-fab { display: none !important; }
  .tnui .tn-main { margin-top: 0; }
}

/* modals: on phones 100vh is taller than the visible area (browser bars), which cut off the buttons - use the dynamic height and keep room at the bottom */
@media (max-width: 760px) {
  .modal-overlay { overflow: hidden; }
  .modal, .tnui .modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal .modal-body { padding-bottom: 90px; }
}