/* ===== ZN ERP Services theme — light / violet (Theme5) ===== */
:root {
  /* UI accent (violet). Kept the legacy --zn-blue* names so existing
     component rules pick up the new accent automatically. */
  --zn-blue: #7c3aed;
  --zn-blue-dark: #6d28d9;
  --violet-soft: #f4efff;
  --violet-line: #e7dcfb;

  /* deep violet for the "selected option" header gradient */
  --zn-navy: #3b2d6b;
  --zn-navy-2: #4c2f86;

  /* logo brand blue — independent of the UI accent */
  --zn-logo: #1789e3;

  /* neutrals */
  --zn-bg: #fafbfd;
  --zn-card: #ffffff;
  --zn-ink: #1c2333;
  --zn-muted: #737d92;
  --zn-line: #ebeef3;

  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #6d28d9;
  --bs-link-hover-color: #5b21b6;

  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1c2333;
  --bs-card-border-radius: 14px;
  --bs-card-border-color: var(--zn-line);
}

html {
  /* Base font size that scales the whole app (Bootstrap sizes in rem).
     14px = the Theme5 base. */
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

body {
  background-color: var(--zn-bg);
  font-family: var(--bs-body-font-family);
  color: var(--zn-ink);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .18);
  border-color: var(--zn-blue);
}

/* Brand buttons / links */
.btn-primary {
  --bs-btn-bg: var(--zn-blue);
  --bs-btn-border-color: var(--zn-blue);
  --bs-btn-hover-bg: var(--zn-blue-dark);
  --bs-btn-hover-border-color: var(--zn-blue-dark);
  --bs-btn-active-bg: var(--zn-blue-dark);
  --bs-btn-active-border-color: var(--zn-blue-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--zn-blue);
  --bs-btn-border-color: var(--zn-blue);
  --bs-btn-hover-bg: var(--zn-blue);
  --bs-btn-hover-border-color: var(--zn-blue);
  --bs-btn-active-bg: var(--zn-blue-dark);
  --bs-btn-active-border-color: var(--zn-blue-dark);
}
.text-primary { color: var(--zn-blue) !important; }
a { color: var(--zn-blue-dark); }

/* Buttons — Theme5 sizing (rounded, 600 weight) */
.btn {
  --bs-btn-border-radius: 10px;
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .85rem;
  --bs-btn-padding-y: .52rem;
  --bs-btn-padding-x: 1rem;
}
.btn-sm {
  --bs-btn-border-radius: 9px;
  --bs-btn-font-size: .85rem;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .85rem;
}
/* Page-header action buttons (Add New / Filter / Preview / Save) = Theme5 full size,
   overriding btn-sm here only — table row buttons & modal buttons stay compact. */
.card-header .btn {
  --bs-btn-border-radius: 10px;
  --bs-btn-font-size: .85rem;
  --bs-btn-padding-y: .62rem;
  --bs-btn-padding-x: 1.1rem;
}

/* Form typography — match Theme5 (modals/pages; login form-floating unaffected) */
.form-label { font-size: .82rem; font-weight: 600; color: #4a5468; }
.modal .form-control, .modal .form-select { font-size: .9rem; }
.modal-title { font-size: 1.02rem; font-weight: 700; }
.alert { font-size: .9rem; }

/* Cards — soft, rounded */
.card { border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 35, 51, .05), 0 6px 18px rgba(28, 35, 51, .045); }
.card-header { background: #fff; border-bottom: 1px solid var(--zn-line); }

/* ===== Tables — Theme5 (borderless, row separators only, hover tint) ===== */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: #f7f5ff;        /* subtle violet row hover */
  font-size: .88rem;
  color: var(--zn-ink);
  margin-bottom: 0;
}
/* clear ALL cell borders (incl. table-bordered grid lines) ... */
.table > :not(caption) > * > * {
  border-width: 0;
  padding: .72rem .9rem;
  background-color: transparent;
}
/* ... then add only horizontal separators (Theme5 look) */
.table > tbody > tr > * { border-top: 1px solid var(--zn-line); }
.table > thead > tr > th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .67rem;
  color: var(--zn-muted);
  font-weight: 700;
  background: #fbfbfd;
  border-bottom: 1px solid var(--zn-line);
  white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { color: var(--zn-ink); }

/* DataTables controls (length / search / info / paginate) */
.dataTables_wrapper, .dt-container, div.dt-container { font-size: .85rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-paging .dt-paging-button.current {
  background: var(--violet-soft) !important; color: var(--zn-blue) !important;
  border-color: var(--violet-line) !important; border-radius: 8px;
}
/* Card header titles ~ Theme5 panel title .98rem */
.card-header .fw-semibold { font-size: .98rem; }

/* Table row "Edit" button — Theme5 rowbtn (square, subtle, violet hover) */
.zn-edit {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  --bs-btn-border-radius: 8px;
  --bs-btn-color: var(--zn-muted);
  --bs-btn-border-color: var(--zn-line);
  --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--zn-blue);
  --bs-btn-hover-border-color: var(--violet-line);
  --bs-btn-hover-bg: var(--violet-soft);
  --bs-btn-active-color: var(--zn-blue);
  --bs-btn-active-bg: var(--violet-soft);
  --bs-btn-active-border-color: var(--violet-line);
}

/* ===== Dashboard ===== */
.zn-stat {
  background: var(--zn-card); border: 1px solid var(--zn-line); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(28,35,51,.05);
  color: var(--zn-ink); display: block;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.zn-stat:hover { border-color: var(--violet-line); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(28,35,51,.08); }
.zn-stat-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 13px; }
.zn-stat-ic.b1 { background: var(--violet-soft); color: var(--zn-blue); }
.zn-stat-ic.b2 { background: #e4f6fb; color: #0e87ad; }
.zn-stat-ic.b3 { background: #e9f7ef; color: #0f9d58; }
.zn-stat-ic.b4 { background: #fbf2e0; color: #c77a00; }
.zn-stat-ic.b5 { background: #eef0ff; color: #4f5bd5; }
.zn-stat-ic.b6 { background: #fdebea; color: #dc3c39; }
.zn-stat-lbl { font-size: .8rem; color: var(--zn-muted); font-weight: 600; }
.zn-stat-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; color: var(--zn-ink); margin-top: 2px; }

.zn-quick { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--zn-line); border-radius: 11px; text-decoration: none; color: var(--zn-ink); transition: .15s; }
.zn-quick:hover { border-color: var(--violet-line); background: var(--violet-soft); }
.zn-quick-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--violet-soft); color: var(--zn-blue); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; }
.zn-quick-lbl { font-weight: 600; font-size: .88rem; flex: 1 1 auto; }
.zn-quick-go { color: #b6c0d4; font-size: .9rem; }
.zn-quick:hover .zn-quick-go { color: var(--zn-blue); }

/* LTL Inv Type — From × To matrix */
.zn-matrix { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.zn-matrix th, .zn-matrix td { border: 1px solid var(--zn-line); padding: .45rem .55rem; text-align: center; }
.zn-matrix thead th { background: #fbfbfd; color: var(--zn-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.zn-matrix .zn-matrix-corner { background: #f3f4f8; text-align: left; position: sticky; left: 0; z-index: 3; }
.zn-matrix .zn-matrix-row { background: #fbfbfd; text-align: left; font-weight: 600; color: var(--zn-ink); position: sticky; left: 0; z-index: 1; white-space: nowrap; }
.zn-matrix .zn-matrix-self { background: repeating-linear-gradient(45deg, #f5f6f9, #f5f6f9 5px, #eef0f4 5px, #eef0f4 10px); color: #c0c6cf; }
.zn-matrix-on { background: var(--violet-soft); }
.zn-matrix .form-check-input { margin: 0; cursor: pointer; }
.zn-matrix-cell { text-align: left; vertical-align: top; }
/* hover: box-highlight only the row & column headers (complete square, light colour) */
.zn-matrix th.zn-hl-hdr {
  box-shadow: inset 0 0 0 2px #2f8eff;   /* complete square in a clear sky-blue */
  background: #eaf3ff;
  color: #0d6efd;
}

/* Overview cell — one invoice type per line (legend chip still uses .zn-ltl-chip) */
.zn-ltl-line { display: block; font-size: .8rem; line-height: 1.5; white-space: nowrap; color: var(--zn-ink); }
.zn-ltl-line + .zn-ltl-line { border-top: 1px dashed var(--zn-line); }
.zn-ltl-line.mrn { color: #0f9d58; font-weight: 600; }
.zn-ltl-mrn {
  display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .03em;
  background: #e9f7ef; color: #0f9d58; border: 1px solid #c2ebd9; border-radius: 4px;
  padding: 0 .3rem; margin-right: .3rem; vertical-align: middle;
}
.zn-ltl-chip {
  display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1.2;
  padding: .12rem .45rem; margin: 1px; border-radius: 6px;
  background: var(--violet-soft); color: var(--zn-blue-dark); border: 1px solid var(--violet-line);
}
.zn-ltl-chip.mrn { background: #e9f7ef; color: #0f9d58; border-color: #c2ebd9; }

/* Total Structure — calculator keypad */
.zn-keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.zn-keypad button {
  border: 1px solid var(--zn-line); background: #fff; border-radius: 9px;
  padding: .5rem 0; font-weight: 600; font-size: .9rem; color: var(--zn-ink);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.zn-keypad button:hover { border-color: var(--violet-line); background: var(--violet-soft); color: var(--zn-blue); }
.zn-keypad button.op { color: var(--zn-blue); background: var(--violet-soft); border-color: var(--violet-line); }
.zn-keypad button.op:hover { background: #e7dcfb; }

/* Sidebar standalone link (Dashboard) */
.zn-navlink { display: flex; align-items: center; padding: .64rem .72rem; margin-bottom: 4px; border-radius: 11px; color: #525c70; font-weight: 500; font-size: .95rem; text-decoration: none; }
.zn-navlink .bi { width: 1.4rem; font-size: 1.15rem; margin-right: .85rem; color: #97a0b3; text-align: center; }
.zn-navlink:hover { background: #f5f6f9; color: var(--zn-ink); }
.zn-navlink:hover .bi { color: var(--zn-blue); }
.zn-navlink.active { background: var(--violet-soft); color: var(--zn-blue); font-weight: 600; }
.zn-navlink.active .bi { color: var(--zn-blue); }

/* ===== Brand logo (sidebar + login) ===== */
.zn-brand { display: flex; align-items: center; gap: 9px; color: var(--zn-logo); line-height: 1; }
.zn-brand-mark { height: 42px; width: auto; flex: 0 0 auto; }
.zn-brand-text { display: flex; flex-direction: column; font-family: 'Chakra Petch', system-ui, sans-serif; font-weight: 700; }
.zn-brand-1 { font-size: 1.02rem; letter-spacing: .01em; color: var(--zn-ink); }
.zn-brand-2 { font-size: .74rem; letter-spacing: .235em; color: #45506a; }

/* ===== Sidebar layout ===== */
:root { --zn-sidebar-w: 236px; --zn-topbar-h: 62px; }

/* Sidebar (light) */
.zn-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--zn-sidebar-w);
  background: #fff;
  border-right: 1px solid var(--zn-line);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease;
}
.zn-sidebar-brand { flex: 0 0 auto; padding: 20px 14px; border-bottom: 1px solid var(--zn-line); text-align: center; }
.zn-sidebar-brand a { text-decoration: none; display: block; }
/* Larger, centered brand lockup in the sidebar header (scoped — login/public stay as-is). */
.zn-sidebar-brand .zn-brand { justify-content: center; gap: 11px; transform: translateX(-10px); }
/* The lockup is centered, but the wordmark lines stay left-aligned to each other (standard logo). */
.zn-sidebar-brand .zn-brand-text { text-align: left; align-items: flex-start; }
.zn-sidebar-brand .zn-brand-mark { height: 56px; }
.zn-sidebar-brand .zn-brand-1 { font-size: 1.22rem; }
.zn-sidebar-brand .zn-brand-2 { font-size: .82rem; letter-spacing: .2em; }
.zn-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 8px 18px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d3d8e3 transparent;
}
.zn-sidebar-nav::-webkit-scrollbar { width: 6px; }
.zn-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.zn-sidebar-nav::-webkit-scrollbar-thumb { background: #d8dde7; border-radius: 6px; }
.zn-sidebar-nav:hover::-webkit-scrollbar-thumb { background: #c3cad7; }

/* Sidebar footer — user chip + logout (Theme5) */
.zn-sidebar-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  margin: 6px 10px 12px;
  border: 1px solid var(--zn-line);
  border-radius: 11px;
}
.zn-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.zn-foot-id { flex: 1 1 auto; min-width: 0; }
.zn-foot-name { font-size: .82rem; font-weight: 600; color: var(--zn-ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-foot-role { font-size: .68rem; color: var(--zn-muted); }
.zn-foot-logout { color: #97a0b3; font-size: 1.05rem; text-decoration: none; padding: .15rem .2rem; flex: 0 0 auto; }
.zn-foot-logout:hover { color: var(--zn-blue); }

/* Sidebar accordion (groups) — styled like Theme5 nav items */
.zn-sidebar .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; }
.zn-sidebar .accordion-item { background: transparent; border: 0; margin-bottom: 4px; }
.zn-sidebar .accordion-button {
  background: transparent;
  color: #525c70;
  font-weight: 500;
  font-size: .95rem;
  padding: .64rem .72rem;
  box-shadow: none;
  border-radius: 11px !important;   /* override Bootstrap .accordion-flush radius:0 */
}
.zn-sidebar .accordion-button:hover { background: #f5f6f9; color: var(--zn-ink); }
.zn-sidebar .accordion-button:not(.collapsed) { background: var(--violet-soft); color: var(--zn-blue); font-weight: 600; }
.zn-sidebar .accordion-button::after { width: .78rem; height: .78rem; background-size: .78rem; opacity: .55; }
/* Sidebar section label (Theme5 "MAIN") */
.zn-sb-label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #9aa3b5; font-weight: 700; padding: 2px 12px 8px; }

.zn-grp-icon { width: 1.4rem; font-size: 1.15rem; margin-right: .85rem; color: #97a0b3; text-align: center; }
.zn-sidebar .accordion-button:hover .zn-grp-icon,
.zn-sidebar .accordion-button:not(.collapsed) .zn-grp-icon { color: var(--zn-blue); }

/* Sidebar leaves */
.zn-leaf-list { list-style: none; margin: 0; padding: .1rem 0 .25rem; }
.zn-leaf-list a {
  position: relative;
  display: flex; align-items: center; gap: .15rem;
  padding: .38rem .65rem .38rem 2.05rem;
  margin: 1px 0;
  color: #56607a;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border-radius: 8px;
}
.zn-leaf-list a:hover { background: #f5f6f9; color: var(--zn-ink); }
.zn-leaf-list a .bi-dot { font-size: 1.2rem; margin-right: .05rem; color: #b6c0d4; }
.zn-leaf-list a:hover .bi-dot { color: var(--zn-blue); }
/* active page (current route) — Theme5 highlight */
.zn-leaf-list a.active { background: var(--violet-soft); color: var(--zn-blue); font-weight: 600; }
.zn-leaf-list a.active .bi-dot { color: var(--zn-blue); }
.zn-leaf-list a.active::before {
  content: ""; position: absolute; left: .5rem; top: .42rem; bottom: .42rem;
  width: 3px; border-radius: 3px; background: var(--zn-blue);
}

/* Backdrop (mobile) */
.zn-backdrop {
  position: fixed; inset: 0; background: rgba(20, 25, 40, .4);
  z-index: 1040; display: none;
}
.zn-backdrop.show { display: block; }

/* Shell (everything right of the sidebar) */
.zn-shell { display: flex; flex-direction: column; min-height: 100vh; }
.zn-has-sidebar .zn-shell { margin-left: var(--zn-sidebar-w); }

/* Top bar */
.zn-topbar {
  position: sticky; top: 0; z-index: 1030;
  min-height: var(--zn-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .4rem 1.6rem;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--zn-line);
}
.zn-topbar-head { line-height: 1.06; }
.zn-crumb { font-size: .72rem; color: var(--zn-muted); font-weight: 500; }
.zn-topbar-title { font-size: 1.1rem; font-weight: 700; color: var(--zn-ink); }
.zn-userchip { color: var(--zn-muted); }
.zn-userchip .zn-uname { color: var(--zn-ink) !important; }
.zn-burger { display: none; font-size: 1.3rem; line-height: 1; color: #56607a; padding: .1rem .5rem; }
.zn-burger:hover { color: var(--zn-blue); }

/* Topbar search pill (Theme5) */
.zn-topsearch {
  align-items: center; gap: 8px;
  background: #f5f6f9; border: 1px solid var(--zn-line);
  border-radius: 999px; padding: 8px 13px; width: 250px; color: var(--zn-muted);
}
.zn-topsearch i { font-size: .9rem; }
.zn-topsearch input {
  border: 0; outline: 0; background: transparent; font: inherit;
  font-size: .84rem; width: 100%; color: var(--zn-ink);
}

/* Topbar icon buttons (Theme5) */
.zn-iconbtn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--zn-line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #56607a; font-size: 1rem; position: relative; text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}
.zn-iconbtn:hover { border-color: var(--violet-line); color: var(--zn-blue); background: var(--violet-soft); }
.zn-iconbtn-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; background: #dc3c39; border-radius: 50%; border: 2px solid #fff; }

/* Top-bar icon+text links (Alerts / Pricing / Docs / Help) */
.zn-toplink {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 36px; padding: 0 .7rem; border-radius: 10px;
  border: 1px solid var(--zn-line); background: #fff;
  color: #56607a; font-size: .8rem; font-weight: 600; line-height: 1;
  text-decoration: none; position: relative; white-space: nowrap; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.zn-toplink:hover { border-color: var(--violet-line); color: var(--zn-blue); background: var(--violet-soft); }
.zn-toplink .bi { font-size: 1rem; }
@media (max-width: 575.98px) {
  .zn-toplink span:not(.zn-iconbtn-dot) { display: none; }
  .zn-toplink { padding: 0 .5rem; }
}

.zn-content { flex: 1 1 auto; padding: 1.5rem 1.6rem; }
.zn-footer {
  border-top: 1px solid var(--zn-line);
  color: var(--zn-muted);
  padding: .6rem 1.35rem;
  font-size: .85rem;
}

/* Responsive: collapse sidebar below lg */
@media (max-width: 991.98px) {
  .zn-has-sidebar .zn-shell { margin-left: 0; }
  .zn-sidebar { transform: translateX(-100%); }
  .zn-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(20, 25, 40, .25); }
  .zn-burger { display: inline-flex; align-items: center; }   /* only on mobile, to open the sidebar */
}

/* Assignment / sanction grid rows — state shown via BORDER colour (reads on light AND dark;
   the colours are mid-tones chosen to stay legible on either background). */
.form-check:has(.zn-menu) {
  border-radius: .3rem;
  border: 1.5px solid transparent;
  padding: 1px 5px;
  cursor: default;
  transition: border-color .12s ease, background-color .12s ease;
}
.form-check:has(.zn-menu) .form-check-label {
  display: block;          /* label fills the row width so a click anywhere toggles */
  cursor: default;
}
.form-check:has(.zn-menu):hover {
  outline: 2px solid rgba(124, 58, 237, 0.45);   /* highlight on mouse-over */
  outline-offset: -2px;
}
/* Unchecked / available — subtle neutral border */
.form-check.zn-pending { border-color: var(--zn-line); }
.form-check.zn-pending .form-check-label { color: var(--zn-muted); font-weight: 400; }
/* Sanction available (means "available, not yet sanctioned") — amber border */
.form-check.zn-sanc-row.zn-pending { border-color: #e0a106; }
.form-check.zn-sanc-row.zn-pending .form-check-label { color: #c08a00; font-weight: 500; }
/* Pending changes vs. last saved (set by JS via data-orig) */
.form-check.zn-added { border-color: #1a9e63 !important; }       /* green: newly ticked */
.form-check.zn-added .form-check-label { color: #1a9e63; font-weight: 600; }
.form-check.zn-removed { border-color: #e23744 !important; }     /* red: newly un-ticked */
.form-check.zn-removed .form-check-label { color: #e23744; font-weight: 600; }

/* Native clear (✕) on search inputs — simple neutral look */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 13px; width: 13px;
  margin-left: .4rem;
  cursor: pointer;
  opacity: .55;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM11 10.2l-.8.8L8 8.8 5.8 11l-.8-.8L7.2 8 5 5.8l.8-.8L8 7.2l2.2-2.2.8.8L8.8 8z'/%3e%3c/svg%3e");
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* Tom Select (searchable dropdowns) — match the app's normal font, not faint/small */
.ts-wrapper .ts-control,
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
  font-size: 1rem !important;
  color: var(--bs-body-color);
  border-radius: 10px;
}
.ts-control .item { color: var(--bs-body-color); }
.ts-control input,
.ts-control input::placeholder { font-size: 1rem; }
.ts-dropdown { font-size: 1rem; color: var(--bs-body-color); }
.ts-dropdown .option, .ts-dropdown .optgroup-header { color: var(--bs-body-color); }
.ts-dropdown .active { background: var(--violet-soft); color: var(--zn-blue-dark); }

/* On-brand, readable dropdown hover everywhere (Bootstrap menus + Tom Select) */
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--violet-soft); color: var(--zn-blue-dark); }

/* Nav-pill tabs (e.g. LTLInvType mode switch) — clearly visible inactive links */
.nav-pills .nav-link { color: var(--zn-blue-dark); font-weight: 600; }
.nav-pills .nav-link:not(.active):hover { background: var(--violet-soft); color: var(--zn-blue-dark); }
.nav-pills .nav-link.active { background-color: var(--zn-blue); color: #fff; }

/* Form controls — rounded, with a clearly visible border + hover cue so an empty
   field always reads as an input box (not just text), distinct from its label. */
.form-control, .form-select { border-radius: 10px; border-color: #d2d9e6; }
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) { border-color: #b7c1d6; }

/* Sanction "Detail" toggle: show URL + description under each menu (hidden by default) */
.zn-detail { display: none; }
.zn-sanc-row.zn-show-detail .zn-detail {
  display: block;
  margin: .15rem 0 .25rem .1rem;
  padding-left: .5rem;
  border-left: 2px solid #dbe3ee;
}
.zn-detail .zn-detail-url,
.zn-detail .zn-detail-desc { display: block; font-size: .9rem; line-height: 1.35; }

/* Printing Fields — query columns not yet mapped to a field row (theme-aware tint). */
.zn-pf-undefined > td { background: rgba(224, 161, 6, .10); }
[data-theme="standard"] .zn-pf-undefined > td { background: rgba(224, 161, 6, .16); }

/* Package costing — live cost preview + inline quantity editor */
.zn-cost-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; background: var(--violet-soft); border: 1px solid var(--violet-line); border-radius: 10px; padding: .6rem 1rem; font-size: .92rem; }
.zn-cp-item { color: var(--zn-ink); }
.zn-cp-item .bi { color: var(--zn-blue); margin-right: .3rem; }
.zn-cp-item b { color: var(--zn-blue-dark); font-weight: 700; margin-left: .2rem; }
.zn-cp-sep { color: var(--zn-muted); font-weight: 700; }
.zn-cp-total b { font-size: 1.08rem; }
html[data-theme="standard"] .zn-cost-preview { background: rgba(124,58,237,.14); border-color: rgba(167,139,250,.3); }
html[data-theme="standard"] .zn-cp-item { color: rgba(255,255,255,.85); }
html[data-theme="standard"] .zn-cp-item .bi, html[data-theme="standard"] .zn-cp-item b { color: #c4b5fd; }

.zn-cost-preview-col { flex-direction: column; align-items: stretch; gap: .35rem; }
.zn-cost-preview-col .zn-cp-item { display: flex; justify-content: space-between; }
.zn-cost-preview-col .zn-cp-total { border-top: 1px dashed var(--violet-line); padding-top: .35rem; margin-top: .1rem; }
html[data-theme="standard"] .zn-cost-preview-col .zn-cp-total { border-top-color: rgba(167,139,250,.3); }

#costTable tr.zn-row-flash > td { background: var(--violet-soft); }
html[data-theme="standard"] #costTable tr.zn-row-flash > td { background: rgba(124,58,237,.22); }

.zn-qty-form { display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.zn-qty-input { width: 70px; text-align: right; }
.zn-qty-save { visibility: hidden; }
.zn-qty-save.show { visibility: visible; }

/* Costing entry pane stays in view beside a long table (desktop only). */
@media (min-width: 992px) { .zn-entry-card { position: sticky; top: 80px; } }

/* Pill filter (e.g. package type → filters the package dropdown) */
.zn-pill-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.zn-pill-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--zn-muted); margin-right: .3rem; }
.zn-pill { display: inline-flex; align-items: center; padding: .32rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--zn-blue-dark); background: var(--violet-soft); border: 1px solid var(--violet-line); text-decoration: none; transition: background .12s, color .12s; }
.zn-pill:hover { background: var(--violet-line); color: var(--zn-blue-dark); }
.zn-pill.active { background: var(--zn-blue); color: #fff; border-color: var(--zn-blue); box-shadow: 0 2px 8px rgba(124,58,237,.3); }
html[data-theme="standard"] .zn-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #c4b5fd; }
html[data-theme="standard"] .zn-pill:hover { background: rgba(255,255,255,.1); color: #fff; }
html[data-theme="standard"] .zn-pill.active { background: var(--zn-blue); color: #fff; border-color: var(--zn-blue); }
html[data-theme="standard"] .zn-pill-lbl { color: rgba(255,255,255,.55); }
.zn-detail .zn-detail-url { color: var(--zn-blue-dark); font-weight: 600; word-break: break-all; }
.zn-detail .zn-detail-url i { margin-right: .15rem; }
.zn-detail .zn-detail-desc { color: #495057; }

/* Sanction rows: reject icon at the right + rejected state */
.zn-sanc-row { position: relative; padding-right: 1.9rem; }
.zn-sanc-row .zn-reject {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #c0c6cf;
  line-height: 1;
  padding: 0 .2rem;
  font-size: 1rem;
}
.zn-sanc-row .zn-reject:hover { color: #dc3545; }
.zn-sanc-row .zn-reject.zn-rejected-on { color: #dc3545; }

.form-check.zn-rejected { border-color: #e23744 !important; }
.form-check.zn-rejected .form-check-label {
  color: #e23744;
  text-decoration: line-through;
}

/* Save-confirmation preview tree (Menu User / Sanction) */
#znPreviewModal .modal-body { font-size: 1.05rem; }
.zn-preview-tree { font-size: 1.02rem; max-height: 62vh; }

/* Square, colored-border badges (confirm modal) */
.zn-badge {
  display: inline-block;
  padding: .15em .5em;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  border: 2px solid;
  border-radius: .2rem;
  background: transparent;
}
#znPreviewSummary .zn-badge { font-size: .95rem; }
.zn-badge-step { cursor: pointer; user-select: none; }
.zn-badge-step:hover { background: rgba(0,0,0,.04); }
.zn-badge-step::after { content: " \203A"; font-weight: 700; }   /* › step hint */
@keyframes znFlash {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .6); }
  100% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}
.zn-preview-tree .zn-pt-flash { animation: znFlash .9s ease-out; }
.zn-badge-primary { color: var(--zn-blue-dark); border-color: var(--zn-blue); }
.zn-badge-success { color: #146c43; border-color: #198754; }
.zn-badge-danger { color: #b02a37; border-color: #dc3545; }
.zn-badge-secondary { color: #495057; border-color: #b6bdc6; }
.zn-preview-tree .zn-pt-group {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--zn-navy-2);
  margin-top: .55rem;
  padding: .3rem .55rem;
  background: linear-gradient(90deg, var(--violet-soft), #f8f6ff);
  border-left: 3px solid var(--zn-blue);
  border-radius: .35rem;
}
.zn-preview-tree .zn-pt-group > i { color: var(--zn-blue); }
.zn-preview-tree .zn-pt-gname { flex: 1 1 auto; }
.zn-preview-tree .zn-pt-count { white-space: nowrap; }
.zn-preview-tree ul {
  list-style: none;
  margin: .15rem 0 .3rem 1.15rem;
  padding-left: .85rem;
  border-left: 1px dashed #cdd5e0;
}
.zn-preview-tree li { padding: 2px 0; position: relative; }
.zn-preview-tree li.zn-pt-kept { color: #3b4654; }
.zn-preview-tree li.zn-pt-kept::before {
  content: '';
  display: inline-block;
  width: .5rem; height: .5rem;
  margin: 0 .5rem .1rem -.05rem;
  border-radius: 50%;
  background: #c2cbd6;
}
/* Added / removed render as full tree rows (not chips) so it reads like the real menu */
.zn-preview-tree li.zn-pt-added,
.zn-preview-tree li.zn-pt-removed {
  display: block;
  border: 0;
  border-radius: .2rem;
  padding: 1px .45rem;
  margin: 1px 0;
  font-weight: 600;
}
.zn-preview-tree li.zn-pt-added {
  color: #146c43;
  background: rgba(25, 135, 84, .09);
  border: 1px solid rgba(25, 135, 84, .45);
  box-shadow: inset 3px 0 0 #198754;
}
.zn-preview-tree li.zn-pt-removed {
  color: #b02a37;
  background: rgba(220, 53, 69, .09);
  border: 1px solid rgba(220, 53, 69, .45);
  box-shadow: inset 3px 0 0 #dc3545;
  text-decoration: line-through;
}
.zn-preview-tree .zn-pt-bullet { color: #adb5bd; margin-right: .4rem; }

/* emphasise the change-count badges */
#znPreviewSummary .badge { font-size: .9rem; padding: .45em .7em; }

/* "Selected option" header (Menu User / Sanction) — simple light chip bar */
.zn-selection-head {
  background: var(--violet-soft);
  color: var(--zn-ink);
  border: 1px solid var(--violet-line);
  border-radius: 11px;
  padding: .55rem .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  align-items: center;
}
.zn-selection-head .zn-sel-item {
  font-size: .85rem;
  color: var(--zn-muted);
}
.zn-selection-head .zn-sel-item i { color: var(--zn-blue); margin-right: .35rem; }
.zn-selection-head .zn-sel-item b { color: var(--zn-ink); font-size: .9rem; font-weight: 700; margin-left: .3rem; }

/* ===== Sleek split login ===== */
.zn-auth-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(900px 480px at 100% 0%, #efe7ff 0%, transparent 60%),
    radial-gradient(700px 420px at 0% 100%, #eef0ff 0%, transparent 55%),
    #f6f7fb;
}
.zn-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.zn-auth-card {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--zn-line);
}
.zn-auth-brand {
  /* Always the Standard (dark) look, regardless of the active theme. */
  background:
    radial-gradient(700px 480px at 75% 5%, rgba(99,102,241,.40), transparent 60%),
    linear-gradient(160deg, #160d33 0%, #1c1046 55%, #2a1666 100%);
  color: #fff;
  padding: 2.25rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* main logo centered, co-brand pinned at bottom */
  align-items: center;
}
.zn-auth-brand-main { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
/* Original ZN ERP logo shown as-is (white artwork on the dark panel) */
.zn-auth-logo { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
/* Bottom co-brand lockup (same as the landing): ZN ERP · a product of · ZN Softwares */
.zn-auth-cobrand { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: nowrap; max-width: 100%; }
.zn-auth-cobrand-erp { height: 16px; width: auto; display: block; flex: none; }
.zn-auth-cobrand-lbl { font-size: .5rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; flex: none; }
.zn-auth-cobrand-zns { height: 26px; width: auto; display: block; flex: none; }
/* Centered ZN ERP SERVICES logo (SVG, horizontal lockup — blue mark + white wordmark) */
.zn-auth-brand .zn-brand { color: #38a7ff; gap: 14px; }
.zn-auth-brand .zn-brand-mark { height: 62px; filter: drop-shadow(0 2px 10px rgba(56,167,255,.45)); }
.zn-auth-brand .zn-brand-1 { color: #fff; font-size: 1.6rem; letter-spacing: .02em; }
.zn-auth-brand .zn-brand-2 { color: rgba(255, 255, 255, .85); font-size: .92rem; letter-spacing: .34em; }
.zn-auth-form { padding: 2.5rem 2.25rem; }

.zn-captcha-img { background: #fffde7; height: 36px; }
.zn-captcha-refresh { height: 36px; }

.zn-auth-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; }
.zn-auth-legal a {
  font-size: .82rem;
  color: var(--zn-blue-dark);
  text-decoration: none;
  font-weight: 500;
}
.zn-auth-legal a:hover { text-decoration: underline; }

.zn-auth-copy { color: var(--zn-muted); font-size: .78rem; margin: 1rem 0 0; }
.zn-auth-copy a { color: var(--zn-blue-dark); }

@media (max-width: 767.98px) {
  .zn-auth-card { grid-template-columns: 1fr; max-width: 360px; }
  .zn-auth-brand { padding: 2rem 1.75rem; text-align: center; align-items: center; }
  .zn-auth-brand .zn-brand-mark { height: 72px; }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---- Xn Dynamics (ZnD) page ---- */
.znd-searchbar {
  background: #212529;
  z-index: 1030;
}

.znd-search-input {
  max-width: 160px;
  text-align: center;
}

.znd-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.znd-logo {
  max-height: 420px;
  object-fit: contain;
}

.znd-logo-placeholder {
  aspect-ratio: 3 / 4;
  max-height: 420px;
  margin-inline: auto;
  background: linear-gradient(135deg, #4f6d8f 0%, #2c3e50 100%);
}

/* ===== Public landing page ===== */
.lp { font-family: var(--bs-body-font-family); color: var(--zn-ink); margin: 0; }
.lp-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--zn-line); }
.lp-nav .zn-brand { gap: 11px; }
.lp-nav .zn-brand-mark { height: 46px; }
.lp-nav .zn-brand-1 { font-size: 1.24rem; letter-spacing: .02em; }
.lp-nav .zn-brand-2 { font-size: .82rem; letter-spacing: .27em; }
/* On the dark home hero, brighten + glow the mark so the logo draws the eye. */
.lp-home .lp-nav .zn-brand { color: #38a7ff; }
.lp-home .lp-nav .zn-brand-mark { filter: drop-shadow(0 2px 10px rgba(56,167,255,.55)); }
.lp-nav-links { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.lp-nav-links a:not(.lp-btn) { color: #46506a; text-decoration: none; font-weight: 600; font-size: .9rem; }
.lp-nav-links a:not(.lp-btn):hover { color: var(--zn-blue); }
.lp-btn { display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 11px; padding: .6rem 1.2rem; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.lp-btn-primary { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; box-shadow: 0 8px 20px rgba(124,58,237,.3); }
.lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,58,237,.42); color: #fff; }
.lp-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.lp-btn-light { background: #fff; color: #5b21b6; }
.lp-btn-light:hover { transform: translateY(-1px); color: #5b21b6; }
.lp-btn-highlight { background: #fff; color: #5b21b6; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 10px 26px rgba(124,58,237,.32); }
.lp-btn-highlight:hover { background: #fff; color: #4c1d95; transform: translateY(-1px); box-shadow: 0 0 0 2px #fff, 0 14px 32px rgba(124,58,237,.45); }

/* ZN Softwares (parent company) lockup */
.zns-brand { display: inline-flex; align-items: center; line-height: 1; }
.zns-brand-img { height: 30px; width: auto; display: block; }

.lp-hero { position: relative; text-align: center; padding: 5rem 1.5rem 4.5rem; color: #fff; overflow: hidden;
  background: radial-gradient(900px 400px at 80% -10%, rgba(99,102,241,.5), transparent 60%),
              linear-gradient(160deg, #160c33 0%, #2a1364 55%, #4c2f86 100%); }
.lp-hero .zn-brand { justify-content: center; color: #fff; margin-bottom: 1.5rem; }
.lp-hero .zn-brand-mark { height: 64px; }
.lp-hero .zn-brand-1, .lp-hero .zn-brand-2 { color: #fff; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #c4b5fd; background: rgba(255,255,255,.06); border: 1px solid rgba(167,139,250,.3); border-radius: 999px; padding: .36rem 1rem .36rem .8rem; margin-bottom: 1.25rem; }
.lp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px 1px rgba(167,139,250,.7); flex: none; }
.lp-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.5px; max-width: 18ch; margin: 0 auto 1rem; line-height: 1.12; }
.lp-hero .lp-lead { font-size: 1.1rem; color: rgba(255,255,255,.82); max-width: 50ch; margin: 0 auto 2rem; line-height: 1.6; }
.lp-hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.lp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 3rem; }
.lp-stat .n { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.lp-stat .l { font-size: .8rem; color: rgba(255,255,255,.7); margin-top: .3rem; }

.lp-section { padding: 4rem 1.5rem; }
.lp-section-in { max-width: 1100px; margin: 0 auto; }
.lp-section h2 { text-align: center; font-size: 1.8rem; font-weight: 800; letter-spacing: -.3px; margin-bottom: .5rem; }
.lp-section .lp-sub { text-align: center; color: var(--zn-muted); margin-bottom: 2.5rem; }
.lp-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.lp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lp-card-ic b { font-weight: 800; }
.lp-card { background: #fff; border: 1px solid var(--zn-line); border-radius: 16px; padding: 1.6rem; box-shadow: 0 1px 2px rgba(28,35,51,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
.lp-card:hover { border-color: var(--violet-line); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28,35,51,.08); }
.lp-card-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; background: var(--violet-soft); color: var(--zn-blue); }
.lp-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.lp-card p { font-size: .9rem; color: var(--zn-muted); margin: 0; line-height: 1.55; }

.lp-cta { background: radial-gradient(130% 150% at 50% -10%, rgba(139,92,246,.28), transparent 55%), linear-gradient(135deg, #1b1640, #14172e); border: 1px solid rgba(167,139,250,.20); box-shadow: 0 24px 60px rgba(8,6,28,.45); color: #fff; text-align: center; padding: 3.5rem 1.5rem; border-radius: 20px; max-width: 1000px; margin: 1rem auto 4rem; }
.lp-cta h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: .6rem; }
.lp-cta p { color: rgba(255,255,255,.85); margin-bottom: 1.6rem; }

.lp-footer { background: #0e1424; color: #aab6d4; padding: 3rem 1.5rem 1.5rem; }
.lp-footer-in { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.lp-footer .zn-brand { color: #fff; margin-bottom: .8rem; }
.lp-footer .zn-brand-1, .lp-footer .zn-brand-2 { color: #fff; }
.lp-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .7rem; }
.lp-footer a { color: #aab6d4; text-decoration: none; }
.lp-footer a:hover { color: #fff; }
.lp-footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; font-size: .82rem; color: #7e8cae; }
.lp-footer-bottom a { color: #c4b5fd; }

@media (max-width: 980px) and (min-width: 641px) {
  .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .lp-grid, .lp-grid-4 { grid-template-columns: 1fr; }
  .lp-nav-links a:not(.lp-btn) { display: none; }
}

/* ===== Home: single-screen landing (Login · Pricing · Services) ===== */
.lp-home { min-height: 100vh; display: flex; flex-direction: column; color: #fff; overflow: hidden;
  background: radial-gradient(1000px 520px at 85% -15%, rgba(99,102,241,.45), transparent 60%),
              radial-gradient(720px 520px at -5% 115%, rgba(124,58,237,.34), transparent 55%),
              linear-gradient(155deg, #0d0822 0%, #1c1046 52%, #2a1666 100%); }
.lp-home .lp-nav { position: static; background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); padding: .9rem 2rem; }
.lp-home .lp-nav-links a:not(.lp-btn) { color: rgba(255,255,255,.82); }
.lp-home .lp-nav-links a:not(.lp-btn):hover { color: #fff; }
.lp-home .zn-brand-1, .lp-home .zn-brand-2 { color: #fff; }

.lp-home-main { flex: 1; display: flex; align-items: center; padding: 1.25rem 2rem; }
.lp-hero-split { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.2rem; align-items: center; }

.lp-hero-copy h1 { font-size: clamp(2rem, 3.3vw, 3.05rem); font-weight: 800; line-height: 1.1; letter-spacing: -.6px; margin: .85rem 0; }
.lp-hero-copy h1 .grad { background: linear-gradient(90deg, #c4b5fd, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero-copy .lp-lead { font-size: 1.05rem; color: rgba(255,255,255,.8); line-height: 1.6; max-width: 46ch; margin: 0 0 1.7rem; }
.lp-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.lp-actions .lp-btn { padding: .8rem 1.5rem; font-size: .95rem; }
/* Refined stat bar — hairline top, vertical dividers, gradient numbers */
.lp-home-stats { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: .2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1); }
.lp-home-stats > div { padding: 0 1.4rem; }
.lp-home-stats > div:first-child { padding-left: 0; }
.lp-home-stats > div:not(:first-child) { border-left: 1px solid rgba(255,255,255,.12); }
.lp-home-stats .n { font-size: 1.62rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #ffffff 30%, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-home-stats .l { font-size: .73rem; color: rgba(255,255,255,.55); margin-top: .35rem; letter-spacing: .01em; }

.lp-svc-head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; font-weight: 700; margin-bottom: .9rem; }
.lp-svc-stack { display: flex; flex-direction: column; gap: .85rem; }
.lp-svc { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1rem 1.15rem; text-decoration: none; color: #fff; transition: transform .15s, background .15s, border-color .15s; backdrop-filter: blur(6px); }
.lp-svc:hover { background: rgba(255,255,255,.1); border-color: rgba(196,181,253,.55); transform: translateY(-2px); color: #fff; }
.lp-svc-ic { width: 48px; height: 48px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #7c3aed, #6366f1); }
.lp-svc-txt { flex: 1; min-width: 0; }
.lp-svc-txt b { display: block; font-size: 1rem; font-weight: 700; }
.lp-svc-txt span { font-size: .82rem; color: rgba(255,255,255,.66); }
.lp-svc-go { color: #c4b5fd; font-size: 1.15rem; flex: none; }

.lp-home-foot { padding: .95rem 2rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.6); }
.lp-home-foot a { color: rgba(255,255,255,.78); text-decoration: none; }
.lp-home-foot a:hover { color: #fff; }
.lp-home-foot .sep { opacity: .35; margin: 0 .2rem; }
.lp-foot-right { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.lp-foot-zns { display: inline-flex; align-items: center; color: rgba(255,255,255,.82); }
.lp-foot-zns:hover { color: #fff; }
.lp-foot-zns .zns-brand-img { height: 24px; }
.lp-foot-by { display: inline-flex; align-items: center; gap: .4rem; }

/* Co-brand line: ZN ERP logo · a product of · ZN Softwares logo */
.lp-byline { display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin: 0 0 1.3rem; }
.lp-byline-lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lp-byline-zns { display: inline-flex; align-items: center; text-decoration: none; }
/* ZN ERP official PNG (white version) — shown as-is on the dark hero. */
.lp-byline-erp { height: 30px; width: auto; display: block; }
.lp-byline .zns-brand-img { height: 52px; }

@media (max-width: 900px) {
  .lp-home { min-height: 0; }
  .lp-hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .lp-home-main { padding: 2rem 1.2rem; }
  .lp-home .lp-nav { padding: .8rem 1.2rem; }
}
@media (max-width: 560px) {
  .lp-home-stats { gap: 1.1rem 1.6rem; }
  .lp-home-stats > div { padding: 0; border-left: 0; }
}

/* ===== Public document / pricing pages ===== */
.lp-doc { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 1rem; }
.lp-doc h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.4px; margin-bottom: .3rem; }
.lp-doc .lp-meta { color: var(--zn-muted); font-size: .9rem; margin-bottom: 2rem; }
.lp-doc h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .6rem; color: var(--zn-ink); }
.lp-doc p, .lp-doc li { color: #3b4658; line-height: 1.75; }
.lp-doc ul { padding-left: 1.2rem; }
.lp-doc a { color: var(--zn-blue-dark); }
.lp-price-amt { font-size: 1.5rem; font-weight: 800; color: var(--zn-blue); margin: .2rem 0 .1rem; }
.lp-price-amt small { font-size: .78rem; color: var(--zn-muted); font-weight: 600; }
.lp-feat { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.lp-feat li { padding: .32rem 0 .32rem 1.6rem; position: relative; font-size: .9rem; color: #3b4658; }
.lp-feat li::before { content: "\2713"; position: absolute; left: 0; color: #0f9d58; font-weight: 700; }
.lp-card.featured { border-color: var(--zn-blue); box-shadow: 0 12px 30px rgba(124,58,237,.15); }
.lp-badge-pop { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--violet-soft); color: var(--zn-blue); border-radius: 999px; padding: .15rem .6rem; margin-bottom: .6rem; }

/* ---- Pricing selector bar (data-driven plans) ---- */
.lp-pricebar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; background: #fff; border: 1px solid var(--zn-line); border-radius: 16px; padding: 1.1rem 1.3rem; box-shadow: 0 1px 2px rgba(28,35,51,.05); margin-bottom: 2rem; }
.lp-field { display: flex; flex-direction: column; gap: .3rem; min-width: 175px; flex: 1 1 175px; }
.lp-field label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zn-muted); }
.lp-field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'><path fill='%237c3aed' d='M4 6l4 4 4-4'/></svg>") no-repeat right .7rem center; border: 1px solid var(--zn-line); border-radius: 11px; padding: .55rem 2rem .55rem .8rem; font: inherit; font-size: .92rem; color: var(--zn-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lp-field select:focus { outline: none; border-color: var(--zn-blue); box-shadow: 0 0 0 3px var(--violet-soft); }

.lp-pricenote { text-align: center; color: var(--zn-muted); background: var(--violet-soft); border: 1px dashed var(--violet-line); border-radius: 14px; padding: 1.6rem 1.4rem; font-size: .95rem; }
.lp-pricenote .bi { color: var(--zn-blue); margin-right: .35rem; }

.lp-grid-auto { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.lp-plan { display: flex; flex-direction: column; }
.lp-plan-remark { font-size: .88rem; color: var(--zn-muted); margin: 0 0 .2rem; }
.lp-plan-price { margin: .5rem 0 .2rem; }
.lp-was { display: flex; align-items: center; gap: .5rem; min-height: 1.1rem; }
.lp-strike { text-decoration: line-through; color: var(--zn-muted); font-size: .9rem; }
.lp-offer-tag { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b45309; background: #fff4e0; border-radius: 999px; padding: .1rem .5rem; }
.lp-feat .lp-lic-type { color: var(--zn-muted); font-size: .78rem; }
.lp-plan .lp-feat { flex: 1 1 auto; }
.lp-btn-block { width: 100%; justify-content: center; }

.lp-contact-card { max-width: 460px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--zn-line); border-radius: 16px; padding: 2rem 1.8rem; box-shadow: 0 1px 2px rgba(28,35,51,.05); }
.lp-contact-card .lp-card-ic { margin: 0 auto 1rem; }
.lp-contact-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.lp-contact-card p { color: var(--zn-muted); font-size: .92rem; margin-bottom: 1.1rem; }
.lp-contact-lines { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: #3b4658; margin-bottom: 1.3rem; }
.lp-contact-lines .bi { color: var(--zn-blue); margin-right: .4rem; }

/* ---- Service centre cards ---- */
.lp-sc { display: flex; flex-direction: column; }
.lp-sc-top { display: flex; align-items: flex-start; gap: .8rem; }
.lp-sc-top .lp-card-ic { margin-bottom: .4rem; flex: none; }
.lp-sc h3 { font-size: 1rem; font-weight: 700; margin: .2rem 0 .1rem; }
.lp-sc-loc { font-size: .8rem; font-weight: 600; color: var(--zn-blue-dark); }
.lp-sc-addr { font-size: .85rem; color: var(--zn-muted); margin: .5rem 0 .8rem; line-height: 1.5; flex: 1 1 auto; }
.lp-sc-contact { display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid var(--zn-line); padding-top: .8rem; }
.lp-sc-contact a { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: #3b4658; text-decoration: none; }
.lp-sc-contact a:hover { color: var(--zn-blue-dark); }
.lp-sc-contact .bi { color: var(--zn-blue); }

/* =================================================================
   Public layout — landing (dark/premium) theme for Pricing / Services / Legal.
   Scoped to body[data-theme="standard"] .lp-public so the authenticated app theme is untouched.
   Pages still scroll normally (no single-screen constraint).
   ================================================================= */
[data-theme="standard"] .lp-public { color: #fff; background:
    radial-gradient(1100px 560px at 85% -8%, rgba(99,102,241,.40), transparent 60%),
    radial-gradient(760px 540px at -8% 4%, rgba(124,58,237,.30), transparent 55%),
    #120a2e;
  background-attachment: fixed; }

/* Nav: sticky + dark glassy (matches the landing nav styling) */
[data-theme="standard"] .lp-public .lp-nav { background: rgba(13,8,30,.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
[data-theme="standard"] .lp-public .lp-nav-links a:not(.lp-btn) { color: rgba(255,255,255,.82); }
[data-theme="standard"] .lp-public .lp-nav-links a:not(.lp-btn):hover { color: #fff; }
[data-theme="standard"] .lp-public .lp-nav .zn-brand { color: #38a7ff; }
[data-theme="standard"] .lp-public .zn-brand-1, [data-theme="standard"] .lp-public .zn-brand-2 { color: #fff; }
[data-theme="standard"] .lp-public .lp-nav .zn-brand-mark { filter: drop-shadow(0 2px 10px rgba(56,167,255,.5)); }

/* Section headings + alternating band */
[data-theme="standard"] .lp-public .lp-section h2 { color: #fff; }
[data-theme="standard"] .lp-public .lp-section .lp-sub { color: rgba(255,255,255,.66); }
[data-theme="standard"] .lp-public .lp-section-alt { background: rgba(255,255,255,.025); }

/* Cards → glassy on dark */
[data-theme="standard"] .lp-public .lp-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; color: #fff; }
[data-theme="standard"] .lp-public .lp-card:hover { background: rgba(255,255,255,.085); border-color: rgba(196,181,253,.5); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
[data-theme="standard"] .lp-public .lp-card h3 { color: #fff; }
[data-theme="standard"] .lp-public .lp-card p { color: rgba(255,255,255,.66); }
[data-theme="standard"] .lp-public .lp-card-ic { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; }
[data-theme="standard"] .lp-public .lp-feat li { color: rgba(255,255,255,.82); }
[data-theme="standard"] .lp-public .lp-feat li::before { color: #34d399; }
[data-theme="standard"] .lp-public .lp-feat .lp-lic-type { color: rgba(255,255,255,.5); }
[data-theme="standard"] .lp-public .lp-card.featured { border-color: #a78bfa; box-shadow: 0 14px 34px rgba(124,58,237,.28); }
[data-theme="standard"] .lp-public .lp-badge-pop { background: rgba(124,58,237,.32); color: #d6ccff; }

/* Legal documents */
[data-theme="standard"] .lp-public .lp-doc h1, [data-theme="standard"] .lp-public .lp-doc h2 { color: #fff; }
[data-theme="standard"] .lp-public .lp-doc p, [data-theme="standard"] .lp-public .lp-doc li { color: rgba(255,255,255,.78); }
[data-theme="standard"] .lp-public .lp-doc a { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-doc .lp-meta { color: rgba(255,255,255,.5); }

/* Pricing configurator */
[data-theme="standard"] .lp-public .lp-config { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
[data-theme="standard"] .lp-public .lp-field-lbl, [data-theme="standard"] .lp-public .lp-term-lbl, [data-theme="standard"] .lp-public .lp-pick-lbl { color: rgba(255,255,255,.62); }
[data-theme="standard"] .lp-public .lp-field-lbl .bi, [data-theme="standard"] .lp-public .lp-term-lbl .bi { color: #a78bfa; }
[data-theme="standard"] .lp-public .lp-pick.done .lp-step-num { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; }
[data-theme="standard"] .lp-public .lp-field select { background-color: #1b1142; border-color: rgba(255,255,255,.18); color: #fff; }
[data-theme="standard"] .lp-public .lp-field select option { background: #1b1142; color: #fff; }
[data-theme="standard"] .lp-public .lp-field select:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124,58,237,.3); }
[data-theme="standard"] .lp-public .lp-term-track { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
[data-theme="standard"] .lp-public .lp-term-track label { color: #d6ccff; }
[data-theme="standard"] .lp-public .lp-term-track label:hover { background: rgba(124,58,237,.28); }

/* Results header + chips */
[data-theme="standard"] .lp-public .lp-results-head .h { color: #fff; }
[data-theme="standard"] .lp-public .lp-chip { background: rgba(124,58,237,.22); border-color: rgba(167,139,250,.4); color: #d6ccff; }

/* Pricing note / contact card / plan card extras */
[data-theme="standard"] .lp-public .lp-pricenote { background: rgba(124,58,237,.12); border-color: rgba(167,139,250,.35); color: rgba(255,255,255,.82); }
[data-theme="standard"] .lp-public .lp-pricenote .bi { color: #a78bfa; }
[data-theme="standard"] .lp-public .lp-contact-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
[data-theme="standard"] .lp-public .lp-contact-card h3 { color: #fff; }
[data-theme="standard"] .lp-public .lp-contact-card p { color: rgba(255,255,255,.66); }
[data-theme="standard"] .lp-public .lp-contact-lines { color: rgba(255,255,255,.8); }
[data-theme="standard"] .lp-public .lp-plan-remark { color: rgba(255,255,255,.6); }
[data-theme="standard"] .lp-public .lp-price-amt { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-price-amt small { color: rgba(255,255,255,.55); }
[data-theme="standard"] .lp-public .lp-strike { color: rgba(255,255,255,.5); }
[data-theme="standard"] .lp-public .lp-fineprint { color: rgba(255,255,255,.6); }
[data-theme="standard"] .lp-public .lp-fineprint a { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-btn-soft { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
[data-theme="standard"] .lp-public .lp-btn-soft:hover { background: rgba(255,255,255,.16); color: #fff; }
/* SRQ price list — dark */
[data-theme="standard"] .lp-public .lp-srq-list { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
[data-theme="standard"] .lp-public .lp-srq-row { border-color: rgba(255,255,255,.08); }
[data-theme="standard"] .lp-public .lp-srq-head { background: rgba(255,255,255,.06); }
[data-theme="standard"] .lp-public .lp-srq-head .lp-srq-name,
[data-theme="standard"] .lp-public .lp-srq-head .lp-srq-cost,
[data-theme="standard"] .lp-public .lp-srq-head .lp-srq-info { color: rgba(255,255,255,.6); }
[data-theme="standard"] .lp-public .lp-srq-name { color: rgba(255,255,255,.9); }
[data-theme="standard"] .lp-public .lp-srq-cost { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-srq-info a { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-srq-noinfo { color: rgba(255,255,255,.45); }
[data-theme="standard"] .lp-public .lp-srq-row:not(.lp-srq-head):hover { background: rgba(124,58,237,.16); }
[data-theme="standard"] .lp-public .lp-srq-types { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
[data-theme="standard"] .lp-public .lp-srq-types-head { color: rgba(255,255,255,.55); }
[data-theme="standard"] .lp-public .lp-srq-type-pill { color: rgba(255,255,255,.85); }
[data-theme="standard"] .lp-public .lp-srq-type-pill:hover { background: rgba(255,255,255,.08); }
[data-theme="standard"] .lp-public .lp-srq-types input:checked + .lp-srq-type-pill { background: var(--zn-blue); color: #fff; }
[data-theme="standard"] .lp-public .lp-srq-count { color: rgba(255,255,255,.5); }
[data-theme="standard"] .lp-public .lp-srq-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
[data-theme="standard"] .lp-public .lp-srq-search::placeholder { color: rgba(255,255,255,.45); }
/* Application / Support &amp; Services toggle — dark */
[data-theme="standard"] .lp-public .lp-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
[data-theme="standard"] .lp-public .lp-toggle-btn { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-toggle-btn.active { background: var(--zn-blue); color: #fff; }
[data-theme="standard"] .lp-public .lp-toggle-btn:not(.active):hover { background: rgba(255,255,255,.1); color: #fff; }

/* Configurator steps + package scroller — dark */
[data-theme="standard"] .lp-public .lp-config-head { color: #fff; }
[data-theme="standard"] .lp-public .lp-config-head .bi { color: #a78bfa; }
[data-theme="standard"] .lp-public .lp-config-head span { color: rgba(255,255,255,.55); }
[data-theme="standard"] .lp-public .lp-step-num { background: rgba(124,58,237,.3); color: #d6ccff; }
[data-theme="standard"] .lp-public .lp-field.done .lp-step-num, [data-theme="standard"] .lp-public .lp-term .lp-step-num { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; }
[data-theme="standard"] .lp-public .lp-field.done select { border-color: rgba(167,139,250,.5); }
[data-theme="standard"] .lp-public .lp-plan-track::-webkit-scrollbar-thumb { background: rgba(167,139,250,.4); }
[data-theme="standard"] .lp-public .lp-scroll-btn { border-color: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(124,58,237,.35), 0 10px 26px rgba(0,0,0,.5); }
[data-theme="standard"] .lp-public .lp-scroll-btn:hover { box-shadow: 0 0 0 6px rgba(124,58,237,.45), 0 12px 32px rgba(0,0,0,.6); }
[data-theme="standard"] .lp-public .lp-scroll-hint { color: rgba(255,255,255,.55); }
[data-theme="standard"] .lp-public .lp-scroll-hint .bi { color: #a78bfa; }

/* Service-centre cards */
[data-theme="standard"] .lp-public .lp-sc-loc { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-sc-addr { color: rgba(255,255,255,.6); }
[data-theme="standard"] .lp-public .lp-sc-contact { border-top-color: rgba(255,255,255,.12); }
[data-theme="standard"] .lp-public .lp-sc-contact a { color: rgba(255,255,255,.8); }
[data-theme="standard"] .lp-public .lp-sc-contact a:hover { color: #fff; }
[data-theme="standard"] .lp-public .lp-sc-contact .bi { color: #a78bfa; }

/* =================================================================
   THEME SWITCHER + Standard (dark) theme for the authenticated APP.
   The app is variable-driven and uses Bootstrap's data-bs-theme="dark"
   (set by _ThemeBoot) for cards/tables/forms/modals; here we recolor the
   custom ZN surfaces that hardcode light values + the toggle control.
   ================================================================= */

/* --- Toggle control (used in app topbar + public nav) --- */
.zn-theme-switch { display: inline-flex; align-items: center; background: var(--violet-soft); border: 1px solid var(--violet-line); border-radius: 8px; padding: 1px; gap: 1px; }
.zn-theme-switch button { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: transparent; color: var(--zn-blue-dark); font: inherit; font-size: .68rem; font-weight: 600; padding: .2rem .45rem; border-radius: 7px; cursor: pointer; white-space: nowrap; line-height: 1; }
.zn-theme-switch button .bi { font-size: .78rem; }
.zn-theme-switch button:not(.active):hover { color: var(--zn-blue); }
.zn-theme-switch button.active { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.3); }
html[data-theme="standard"] .zn-theme-switch button:not(.active) { color: #cfc8e6; }
html[data-theme="standard"] .zn-theme-switch button:not(.active):hover { color: #fff; }
@media (max-width: 575.98px) { .zn-theme-switch button span { display: none; } }

/* --- App: Standard (dark) palette via variable overrides --- */
html[data-theme="standard"] {
  --zn-bg: #130b2e;
  --zn-card: #1c1442;
  --zn-ink: #f2eefc;
  --zn-muted: #a79fc4;
  --zn-line: rgba(255,255,255,.12);
  --violet-soft: rgba(124,58,237,.22);
  --violet-line: rgba(167,139,250,.4);
  --bs-body-bg: #130b2e;
  --bs-body-color: #f2eefc;
  --bs-card-border-color: rgba(255,255,255,.12);
  --bs-border-color: rgba(255,255,255,.14);
}

/* Sidebar */
html[data-theme="standard"] .zn-sidebar { background: #170e38; }
html[data-theme="standard"] .zn-sidebar-nav { scrollbar-color: rgba(255,255,255,.2) transparent; }
html[data-theme="standard"] .zn-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
html[data-theme="standard"] .zn-sidebar .accordion-button { color: #cfc8e6; }
html[data-theme="standard"] .zn-sidebar .accordion-button:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="standard"] .zn-sidebar .accordion-button:not(.collapsed) { background: var(--violet-soft); color: #d6c9ff; }
html[data-theme="standard"] .zn-sidebar .accordion-button:hover .zn-grp-icon,
html[data-theme="standard"] .zn-sidebar .accordion-button:not(.collapsed) .zn-grp-icon { color: #c4b5fd; }
html[data-theme="standard"] .zn-leaf-list a { color: #b3acc9; }
html[data-theme="standard"] .zn-leaf-list a:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="standard"] .zn-leaf-list a.active { background: var(--violet-soft); color: #d6c9ff; }
html[data-theme="standard"] .zn-leaf-list a.active .bi-dot { color: #c4b5fd; }
html[data-theme="standard"] .zn-leaf-list a.active::before { background: #c4b5fd; }
html[data-theme="standard"] .zn-navlink { color: #cfc8e6; }
html[data-theme="standard"] .zn-navlink.active, html[data-theme="standard"] .zn-navlink:hover { background: var(--violet-soft); color: #fff; }
/* "SERVICES" sub-wordmark is a hardcoded dark slate (#45506a) — lighten it on the dark chrome */
html[data-theme="standard"] .zn-sidebar .zn-brand-2,
html[data-theme="standard"] .zn-topbar .zn-brand-2 { color: rgba(255,255,255,.55); }

/* Topbar */
html[data-theme="standard"] .zn-topbar { background: rgba(19,11,46,.82); }
html[data-theme="standard"] .zn-burger { color: #cfc8e6; }
html[data-theme="standard"] .zn-topsearch { background: rgba(255,255,255,.06); }
html[data-theme="standard"] .zn-iconbtn { background: rgba(255,255,255,.06); color: #cfc8e6; }
html[data-theme="standard"] .zn-toplink { background: rgba(255,255,255,.06); color: #cfc8e6; border-color: rgba(255,255,255,.08); }
html[data-theme="standard"] .zn-toplink:hover { color: #fff; background: rgba(124,58,237,.22); border-color: rgba(167,139,250,.4); }
html[data-theme="standard"] .zn-iconbtn-dot { border-color: #170e38; }

/* Content surfaces (cards/tables ride on the vars + Bootstrap dark) */
html[data-theme="standard"] .card-header { background: rgba(255,255,255,.03); }
/* Form labels hardcode a dark ink (#4a5468) — relight them on the dark theme so they stay legible. */
html[data-theme="standard"] .form-label { color: rgba(242,238,252,.82); }
/* Text inputs / selects / textareas: Bootstrap's dark default gave them the page
   background with a ~14%-white border, so an empty field was indistinguishable from
   the surface behind it (and from its own label). Raise them into a translucent "well"
   with a clearly visible border + hover/focus cues so the box always reads as an input. */
html[data-theme="standard"] .form-control,
html[data-theme="standard"] .form-select {
  background-color: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.24);
}
html[data-theme="standard"] .form-control:hover:not(:focus):not(:disabled):not([readonly]),
html[data-theme="standard"] .form-select:hover:not(:focus):not(:disabled) { border-color: rgba(255,255,255,.38); }
html[data-theme="standard"] .form-control:focus,
html[data-theme="standard"] .form-select:focus { background-color: rgba(255,255,255,.07); border-color: var(--zn-blue); }
html[data-theme="standard"] .form-control::placeholder { color: rgba(255,255,255,.42); }
html[data-theme="standard"] .form-control:disabled,
html[data-theme="standard"] .form-select:disabled,
html[data-theme="standard"] .form-control[readonly] { background-color: rgba(255,255,255,.02); border-color: rgba(255,255,255,.12); }
/* Checkboxes/radios: Bootstrap's faint dark-theme border was near-invisible — give the box a
   clearer border + subtle fill so the empty square reads on dark surfaces. */
html[data-theme="standard"] .form-check-input { background-color: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
html[data-theme="standard"] .form-check-input:checked { background-color: var(--zn-blue); border-color: var(--zn-blue); }
/* Bootstrap white/light utility surfaces → dark cards (used on the dashboard headers etc.) */
html[data-theme="standard"] .bg-white { background-color: var(--zn-card) !important; }
html[data-theme="standard"] .bg-light { background-color: rgba(255,255,255,.04) !important; }
html[data-theme="standard"] .table > thead > tr > th,
html[data-theme="standard"] .zn-matrix thead th { background: rgba(255,255,255,.05); }
html[data-theme="standard"] .table { --bs-table-hover-bg: rgba(124,58,237,.18); }
html[data-theme="standard"] .zn-edit { background: rgba(255,255,255,.06); border-color: var(--zn-line); color: #b3acc9; }
html[data-theme="standard"] .zn-edit:hover { background: var(--violet-soft); border-color: var(--violet-line); color: #c4b5fd; }
html[data-theme="standard"] .modal-content { background: var(--zn-card); }

/* --- Standard (dark): admin interactive components (MnuUser / Sanction / LTLInvType / preview modal) --- */
/* Matrix (LTLInvType) */
html[data-theme="standard"] .zn-matrix .zn-matrix-corner { background: rgba(255,255,255,.07); }
html[data-theme="standard"] .zn-matrix .zn-matrix-row { background: rgba(255,255,255,.04); }
html[data-theme="standard"] .zn-matrix .zn-matrix-self { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 5px, rgba(255,255,255,.09) 5px, rgba(255,255,255,.09) 10px); color: rgba(255,255,255,.3); }
html[data-theme="standard"] .zn-matrix-on { background: rgba(124,58,237,.32); }
html[data-theme="standard"] .zn-matrix th.zn-hl-hdr { background: rgba(56,167,255,.22); color: #7cc4ff; box-shadow: inset 0 0 0 2px #38a7ff; }
/* LTL overview chips / lines / MRN */
html[data-theme="standard"] .zn-ltl-line.mrn { color: #34d399; }
html[data-theme="standard"] .zn-ltl-mrn,
html[data-theme="standard"] .zn-ltl-chip.mrn { background: rgba(52,211,153,.16); color: #34d399; border-color: rgba(52,211,153,.4); }
/* Total Structure keypad */
html[data-theme="standard"] .zn-keypad button { background: rgba(255,255,255,.06); }
/* Sanction detail / reject */
html[data-theme="standard"] .zn-sanc-row.zn-show-detail .zn-detail { border-left-color: rgba(255,255,255,.2); }
html[data-theme="standard"] .zn-detail .zn-detail-desc { color: rgba(255,255,255,.7); }
/* URL detail was --zn-blue-dark (#6d28d9) — too dark on the dark surface; lift to the light-violet accent. */
html[data-theme="standard"] .zn-detail .zn-detail-url { color: #c4b5fd; }
/* Secondary/dismiss buttons (.btn-light = modal Close / Cancel) were stark white on the dark surface;
   make them a subtle translucent dark button with light text, app-wide. (Light theme keeps default grey.) */
html[data-theme="standard"] .btn-light {
  --bs-btn-bg: rgba(255,255,255,.08);
  --bs-btn-border-color: rgba(255,255,255,.18);
  --bs-btn-color: var(--zn-ink);
  --bs-btn-hover-bg: rgba(255,255,255,.16);
  --bs-btn-hover-border-color: rgba(255,255,255,.30);
  --bs-btn-hover-color: var(--zn-ink);
  --bs-btn-active-bg: rgba(255,255,255,.22);
  --bs-btn-active-border-color: rgba(255,255,255,.30);
  --bs-btn-active-color: var(--zn-ink);
}
/* Save-confirmation preview tree */
html[data-theme="standard"] .zn-preview-tree .zn-pt-group { background: rgba(124,58,237,.18); color: #d6c9ff; }
html[data-theme="standard"] .zn-preview-tree ul { border-left-color: rgba(255,255,255,.18); }
html[data-theme="standard"] .zn-preview-tree li.zn-pt-kept { color: rgba(255,255,255,.72); }
html[data-theme="standard"] .zn-preview-tree li.zn-pt-kept::before { background: rgba(255,255,255,.3); }
html[data-theme="standard"] .zn-preview-tree li.zn-pt-added { color: #34d399; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.5); box-shadow: inset 3px 0 0 #34d399; }
html[data-theme="standard"] .zn-preview-tree li.zn-pt-removed { color: #ff7079; background: rgba(220,53,69,.14); border-color: rgba(220,53,69,.55); box-shadow: inset 3px 0 0 #ff7079; }
html[data-theme="standard"] .zn-preview-tree .zn-pt-bullet { color: rgba(255,255,255,.4); }
html[data-theme="standard"] .zn-badge-success { color: #34d399; border-color: #34d399; }
html[data-theme="standard"] .zn-badge-danger { color: #ff7079; border-color: #ff7079; }
html[data-theme="standard"] .zn-badge-secondary { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.3); }
html[data-theme="standard"] .zn-badge-primary { color: #c4b5fd; border-color: #a78bfa; }
html[data-theme="standard"] .zn-badge-step:hover { background: rgba(255,255,255,.08); }
/* Dropdown hover (Bootstrap menus + Tom Select) */
html[data-theme="standard"] .dropdown-item:hover, html[data-theme="standard"] .dropdown-item:focus { background-color: rgba(124,58,237,.4); color: #fff; }
html[data-theme="standard"] .ts-dropdown .active { background: rgba(124,58,237,.45); color: #fff; }
/* Searchable (Tom Select) controls — typed search text + items were inheriting a muted
   colour, near-invisible on the dark control. Force the theme ink + a visible placeholder. */
html[data-theme="standard"] .ts-control,
html[data-theme="standard"] .ts-control .item,
html[data-theme="standard"] .ts-control input { color: var(--zn-ink); }
html[data-theme="standard"] .ts-control input::placeholder { color: rgba(255,255,255,.45); }
/* Nav-pill tabs — light-violet inactive links on dark (active keeps its white-on-violet) */
html[data-theme="standard"] .nav-pills .nav-link:not(.active) { color: #c4b5fd; }
html[data-theme="standard"] .nav-pills .nav-link:not(.active):hover { background: rgba(124,58,237,.22); color: #fff; }

/* Content links + outline-primary buttons: base violet (#6d28d9/#7c3aed) is too dark on the
   dark surface — lift to the light-violet accent used elsewhere in Standard for legibility. */
html[data-theme="standard"] .zn-content a:not(.btn) { color: #c4b5fd; }
html[data-theme="standard"] .zn-content a:not(.btn):hover { color: #ddd1ff; }
html[data-theme="standard"] .btn-outline-primary {
  --bs-btn-color: #c4b5fd;
  --bs-btn-border-color: rgba(196,181,253,.5);
  --bs-btn-hover-bg: var(--zn-blue);
  --bs-btn-hover-border-color: var(--zn-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--zn-blue-dark);
  --bs-btn-active-border-color: var(--zn-blue-dark);
  --bs-btn-active-color: #fff;
}

/* --- Login page: Standard (dark) variant (Light = the existing Theme5 split) --- */
.zn-auth-themebar { position: fixed; top: 14px; right: 16px; z-index: 20; }
html[data-theme="standard"] .zn-auth-body {
  background:
    radial-gradient(1000px 520px at 100% 0%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(760px 440px at 0% 100%, rgba(124,58,237,.3), transparent 55%),
    #120a2e;
}
html[data-theme="standard"] .zn-auth-card { background: #1b1340; border-color: rgba(255,255,255,.12); }
html[data-theme="standard"] .zn-auth-legal a { color: #c4b5fd; }
html[data-theme="standard"] .zn-auth-copy { color: rgba(255,255,255,.6); }
html[data-theme="standard"] .zn-auth-copy a { color: #c4b5fd; }
/* Captcha refresh button is btn-light (white) — darken it on the dark form */
html[data-theme="standard"] .zn-captcha-refresh {
  --bs-btn-bg: rgba(255,255,255,.08); --bs-btn-border-color: rgba(255,255,255,.2); --bs-btn-color: #cfc8e6;
  --bs-btn-hover-bg: rgba(255,255,255,.16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.3);
}
/* The captcha image keeps its own light background (needed for legibility) but tone its border */
html[data-theme="standard"] .zn-captcha-img { border-color: rgba(255,255,255,.2) !important; }

/* Footer blends with the gradient */
[data-theme="standard"] .lp-public .lp-footer { background: rgba(8,5,22,.55); }

/* Tom Select (searchable category) — dark */
[data-theme="standard"] .lp-public .lp-config .ts-control { background: #1b1142; border-color: rgba(255,255,255,.18); color: #fff; }
/* Tom Select's bundled CSS turns the control white while typing (.input-active);
   re-assert the dark surface with higher specificity so typed text stays visible. */
[data-theme="standard"] .lp-public .lp-config .ts-wrapper.input-active .ts-control,
[data-theme="standard"] .lp-public .lp-config .ts-wrapper.single.input-active .ts-control { background: #1b1142; }
[data-theme="standard"] .lp-public .lp-config .ts-control input, [data-theme="standard"] .lp-public .lp-config .ts-control .item { color: #fff; }
[data-theme="standard"] .lp-public .lp-config .ts-control input::placeholder { color: rgba(255,255,255,.5); }
[data-theme="standard"] .lp-public .lp-config .ts-wrapper.focus .ts-control { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124,58,237,.3); }
[data-theme="standard"] .lp-public .lp-config .ts-dropdown { background: #1b1142; border-color: rgba(255,255,255,.18); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
[data-theme="standard"] .lp-public .lp-config .ts-dropdown .option { color: rgba(255,255,255,.85); }
[data-theme="standard"] .lp-public .lp-config .ts-dropdown .option.active { background: rgba(124,58,237,.45); color: #fff; }

/* ---- Pricing configurator (advanced selection) ---- */
.lp-config { background: #fff; border: 1px solid var(--zn-line); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: 0 6px 26px rgba(28,35,51,.06); margin-bottom: 1.6rem; }
.lp-config-head { display: flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 700; color: var(--zn-ink); margin-bottom: 1.1rem; }
.lp-config-head .bi { color: var(--zn-blue); }
.lp-config-head span { font-weight: 500; font-size: .8rem; color: var(--zn-muted); }
.lp-config-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lp-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--violet-soft); color: var(--zn-blue-dark); font-size: .72rem; font-weight: 800; flex: none; }
.lp-field.done .lp-step-num, .lp-term .lp-step-num, .lp-pick.done .lp-step-num { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; }
.lp-field.done select { border-color: var(--violet-line); }

/* Pick rows — label + segmented pills (Package / Business / Term) or the category dropdown */
.lp-pick { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .45rem; }
.lp-pick + .lp-pick { margin-top: 1.05rem; }
.lp-pick-lbl { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zn-muted); min-width: 122px; }
.lp-cat-field { flex: 0 1 340px; min-width: 220px; }
/* Visual break between the "your business" group (1–2) and the "your plan" group (3–4) */
.lp-pick.lp-pick-break { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--zn-line); }
.lp-field-lbl { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zn-muted); }
.lp-field-lbl .bi { color: var(--zn-blue); font-size: .85rem; }
.lp-term { margin-top: 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lp-term-lbl { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zn-muted); }
.lp-term-lbl .bi { color: var(--zn-blue); font-size: .85rem; }
.lp-term-track { display: inline-flex; flex-wrap: wrap; gap: .25rem; background: var(--violet-soft); border: 1px solid var(--violet-line); border-radius: 13px; padding: .28rem; }
.lp-term-track input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lp-term-track label { cursor: pointer; padding: .45rem .95rem; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--zn-blue-dark); transition: background .15s, color .15s, box-shadow .15s; margin: 0; }
.lp-term-track label:hover { background: rgba(124,58,237,.1); }
.lp-term-track input:checked + label { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.lp-term-track input:focus-visible + label { outline: 2px solid var(--zn-blue); outline-offset: 2px; }

/* ---- Results header + chips ---- */
.lp-results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 1.4rem; }
.lp-results-head .h { font-size: 1.05rem; font-weight: 700; color: var(--zn-ink); }
.lp-result-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.lp-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--violet-soft); color: var(--zn-blue-dark); border: 1px solid var(--violet-line); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; font-weight: 600; }

/* ---- Plan card extras ---- */
.lp-plan { position: relative; }
.lp-plan.featured { transform: translateY(-2px); }
.lp-save { position: absolute; top: .9rem; right: .9rem; background: #fff4e0; color: #b45309; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; }
.lp-btn-soft { background: var(--violet-soft); color: var(--zn-blue-dark); border: 1px solid var(--violet-line); }
.lp-btn-soft:hover { background: var(--violet-line); color: var(--zn-blue-dark); transform: translateY(-1px); }
.lp-fineprint { color: var(--zn-muted); font-size: .85rem; text-align: center; margin-top: 2rem; margin-bottom: 0; }
.lp-fineprint a { color: var(--zn-blue-dark); }

/* ---- Service-request (SRQ) price list ---- */
.lp-srq-config { margin-bottom: 1.4rem; }
.lp-srq-list { border: 1px solid var(--zn-line); border-radius: 14px; overflow: hidden; background: #fff; }
.lp-srq-row { display: grid; grid-template-columns: 1fr auto minmax(110px, auto); gap: 1rem; align-items: center; padding: .8rem 1.2rem; border-bottom: 1px solid var(--zn-line); }
.lp-srq-row:last-child { border-bottom: 0; }
.lp-srq-head { background: var(--violet-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zn-muted); }
.lp-srq-head .lp-srq-name, .lp-srq-head .lp-srq-cost, .lp-srq-head .lp-srq-info { font-weight: 700; color: var(--zn-muted); }
.lp-srq-name { font-weight: 600; color: var(--zn-ink); }
.lp-srq-cost { font-weight: 700; color: var(--zn-blue-dark); white-space: nowrap; text-align: right; }
.lp-srq-info { text-align: right; font-size: .82rem; }
.lp-srq-info a { color: var(--zn-blue-dark); text-decoration: none; white-space: nowrap; }
.lp-srq-info a:hover { text-decoration: underline; }
.lp-srq-noinfo { color: var(--zn-muted); }
.lp-srq-row:not(.lp-srq-head):hover { background: var(--violet-soft); }
.lp-srq-list.lp-2col .lp-srq-row { grid-template-columns: 1fr auto; }

/* SRQ master-detail: request-type pills (left) + rate card (right) */
.lp-srq-layout { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 1.5rem; align-items: start; }
.lp-srq-main { min-width: 0; }
.lp-srq-types { display: flex; flex-direction: column; gap: .4rem; background: #fff; border: 1px solid var(--zn-line); border-radius: 14px; padding: .7rem; position: sticky; top: 80px; max-height: calc(100vh - 96px); }
.lp-srq-types-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--zn-muted); padding: .35rem .65rem .15rem; }
.lp-srq-search { width: 100%; padding: .5rem .75rem; border: 1px solid var(--zn-line); border-radius: 9px; font-size: .85rem; background: var(--zn-bg); color: var(--zn-ink); }
.lp-srq-search:focus { outline: none; border-color: var(--zn-blue); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.lp-srq-types-scroll { display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; min-height: 0; }
.lp-srq-types input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lp-srq-type-pill { display: block; padding: .55rem .85rem; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--zn-ink); cursor: pointer; border: 1px solid transparent; transition: background .12s, color .12s; }
.lp-srq-type-pill:hover { background: var(--violet-soft); }
.lp-srq-types input:checked + .lp-srq-type-pill { background: var(--zn-blue); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.3); }
.lp-srq-count { color: var(--zn-muted); font-weight: 600; font-size: .92rem; }
@media (max-width: 760px) {
    .lp-srq-layout { grid-template-columns: 1fr; }
    .lp-srq-types { position: static; max-height: none; }
    .lp-srq-types-scroll { flex-direction: row; flex-wrap: wrap; overflow: visible; }
}

/* ---- Public Print Formats page ---- */
.lp-field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.lp-fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: .2rem; }
.lp-fmt-card { background: #fff; border: 1px solid var(--zn-line); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.lp-fmt-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--zn-ink); }
.lp-fmt-head .bi { color: var(--zn-blue); font-size: 1.25rem; }
.lp-fmt-name { word-break: break-word; }
.lp-fmt-meta, .lp-fmt-remark { font-size: .82rem; color: var(--zn-muted); }
.lp-fmt-card .lp-btn { margin-top: auto; }
.lp-fmt-nopreview { margin-top: auto; font-size: .8rem; color: var(--zn-muted); font-style: italic; }
[data-theme="standard"] .lp-public .lp-fmt-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="standard"] .lp-public .lp-fmt-head { color: #fff; }
[data-theme="standard"] .lp-public .lp-fmt-head .bi { color: #c4b5fd; }
[data-theme="standard"] .lp-public .lp-fmt-meta,
[data-theme="standard"] .lp-public .lp-fmt-remark,
[data-theme="standard"] .lp-public .lp-fmt-nopreview { color: rgba(255,255,255,.6); }

/* ---- Application / Support &amp; Services toggle ---- */
.lp-toggle-bar { text-align: center; padding: 4rem 1.5rem 0; }
.lp-toggle { display: inline-flex; gap: .3rem; padding: .35rem; background: var(--violet-soft); border: 1px solid var(--violet-line); border-radius: 999px; }
.lp-toggle-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--zn-blue-dark); text-decoration: none; transition: background .15s, color .15s; }
.lp-toggle-btn.active { background: var(--zn-blue); color: #fff; box-shadow: 0 3px 10px rgba(124,58,237,.3); }
.lp-toggle-btn:not(.active):hover { background: var(--violet-line); color: var(--zn-blue-dark); }
/* The toggle bar supplies the top whitespace; trim the section's own top padding. */
#pricing, #srq-pricing { padding-top: 1.5rem; }

/* ---- Package horizontal scroller (browse left/right) ---- */
.lp-plan-scroller { position: relative; margin: 0 2px; }
.lp-plan-track { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; }
.lp-plan-rail { display: flex; gap: 1.2rem; padding: .5rem .2rem 1.1rem; width: max-content; will-change: transform; }
.lp-plan-rail > .lp-plan { flex: 0 0 290px; width: 290px; scroll-snap-align: start; }
.lp-plan-track::-webkit-scrollbar { height: 8px; }
.lp-plan-track::-webkit-scrollbar-track { background: transparent; }
.lp-plan-track::-webkit-scrollbar-thumb { background: var(--violet-line); border-radius: 99px; }
.lp-scroll-btn { position: absolute; top: 46%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 10px 24px rgba(124,58,237,.5); transition: transform .15s, box-shadow .15s, opacity .15s; }
.lp-scroll-btn:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 0 5px rgba(124,58,237,.26), 0 12px 30px rgba(124,58,237,.65); }
.lp-scroll-btn.disabled { opacity: .28; pointer-events: none; }
.lp-scroll-btn .bi { line-height: 1; }
.lp-scroll-prev { left: -16px; }
.lp-scroll-next { right: -16px; }
.lp-scroll-hint { text-align: center; font-size: .8rem; color: var(--zn-muted); margin: .2rem 0 0; }
.lp-scroll-hint .bi { color: var(--zn-blue); margin-right: .3rem; }

/* ---- Tom Select (searchable category) themed to match ---- */
.lp-config .ts-wrapper { margin: 0; }
.lp-config .ts-control { border: 1px solid var(--zn-line); border-radius: 11px; padding: .5rem .8rem; min-height: 0; box-shadow: none; font: inherit; font-size: .92rem; color: var(--zn-ink); background: #fff; }
.lp-config .ts-wrapper.focus .ts-control { border-color: var(--zn-blue); box-shadow: 0 0 0 3px var(--violet-soft); }
.lp-config .ts-dropdown { border: 1px solid var(--zn-line); border-radius: 11px; box-shadow: 0 14px 34px rgba(28,35,51,.14); overflow: hidden; margin-top: .3rem; }
.lp-config .ts-dropdown .option { padding: .5rem .8rem; font-size: .9rem; }
.lp-config .ts-dropdown .option.active { background: var(--violet-soft); color: var(--zn-blue-dark); }

@media (max-width: 760px) {
  .lp-config-row { grid-template-columns: 1fr; }
}

/* ============================== DVR / leads follow-up ============================== */
.zn-dvr-entry { max-width: 920px; }
.zn-dvr-stat { display: inline-flex; align-items: baseline; gap: .35rem; }
.zn-dvr-stat-n { font-size: 1.5rem; font-weight: 800; color: var(--zn-blue); line-height: 1; }
.zn-dvr-stat-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zn-muted); font-weight: 700; }

/* board toolbar */
.zn-board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.zn-view-pills .btn { font-weight: 600; }
.zn-date-nav { display: inline-flex; align-items: center; gap: .35rem; }
.zn-date-lbl { font-weight: 700; color: var(--zn-ink); min-width: 104px; text-align: center; }
.zn-board-exec { min-width: 220px; }

/* lead-cell extras */
.zn-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; margin-right: .15rem; }
.zn-lead-note { max-width: 460px; }

/* follow-up timeline */
.zn-fu-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.zn-fu-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--zn-line); }
.zn-fu-item { position: relative; padding: 0 0 1.15rem 1.7rem; --zn-fu-accent: var(--zn-blue); }
.zn-fu-item::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--zn-fu-accent); border: 2px solid var(--zn-card); box-shadow: 0 0 0 2px var(--zn-fu-accent); }
.zn-fu-item:last-child { padding-bottom: 0; }
.zn-fu-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.zn-fu-date { font-weight: 700; color: var(--zn-ink); }
.zn-fu-by { color: var(--zn-muted); font-size: .82rem; }
.zn-fu-remark { color: var(--zn-ink); white-space: pre-wrap; }
.zn-fu-next { color: var(--zn-muted); margin-top: .25rem; }

/* original call remark box (Call Book detail) */
.zn-call-orig { border-left: 3px solid var(--zn-blue); background: var(--violet-soft); border-radius: 0 8px 8px 0; padding: .55rem .75rem; }

/* ===== Two-pane entry screens (left = selection, right = entries) ===== */
/* sticky selection column beside the entries grid (shared by Sanction / MnuUser / PkgFirm / PFFirm / FeatureSetFeatures / Feature …) */
@media (min-width: 992px) {
  .zn-sel-col { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: .3rem; }
}
/* placeholder shown in the entries pane before a selection is made */
.zn-entry-empty { color: var(--zn-muted); }
/* keep the pending tile list from pushing the selectors out of reach */
.zn-sanc-layout .zn-pchip-list { max-height: 44vh; overflow-y: auto; }
.zn-sanc-layout .zn-pchip, .zn-sanc-layout .zn-pchip-menu { white-space: normal; }

/* ===== Themed confirm dialog (replaces native confirm()) ===== */
.zn-confirm-backdrop {
  position: fixed; inset: 0; z-index: 2050;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(17, 12, 38, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.zn-confirm-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .16s ease; }
.zn-confirm-card {
  width: 100%; max-width: 420px;
  background: var(--zn-card); color: var(--zn-ink);
  border: 1px solid var(--zn-line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 12, 38, .35);
  padding: 1.5rem 1.5rem 1.15rem; text-align: center;
  transform: translateY(8px) scale(.97); transition: transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.zn-confirm-backdrop.show .zn-confirm-card { transform: translateY(0) scale(1); }
.zn-confirm-ic {
  width: 56px; height: 56px; margin: 0 auto .85rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--violet-soft); color: var(--zn-blue);
  font-size: 1.7rem;
}
.zn-confirm-ic.danger { background: rgba(220, 53, 69, .12); color: #dc3545; }
.zn-confirm-title { margin: 0 0 .35rem; font-weight: 700; }
.zn-confirm-msg { margin: 0 0 1.25rem; color: var(--zn-muted); }
.zn-confirm-actions { display: flex; gap: .5rem; justify-content: center; }
.zn-confirm-actions .btn { min-width: 96px; }

html[data-theme="standard"] .zn-confirm-ic { background: rgba(124, 58, 237, .18); color: #c4b5fd; }
html[data-theme="standard"] .zn-confirm-ic.danger { background: rgba(220, 53, 69, .2); color: #f1909a; }