/* Keep inline control rows compact even when the surrounding form labels are full-width. */
.ns-content label.row {
  display: flex;
  width: auto;
  max-width: none;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--muted);
  margin: 8px 0;
}

.ns-content label.row input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.ns-content label.row span {
  display: inline-block;
}

.ns-help-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: 2px;
}

.ns-content button.ns-help-trigger {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;
  border: 1px solid rgba(142, 157, 255, .42);
  border-radius: 50%;
  background: rgba(142, 157, 255, .08);
  color: #aeb8ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ns-content button.ns-help-trigger:hover,
.ns-help-wrap.is-open .ns-help-trigger {
  border-color: #aeb8ff;
  background: rgba(142, 157, 255, .2);
}

.ns-help-popover {
  display: none;
  position: absolute;
  z-index: 60;
  bottom: calc(100% + 9px);
  left: 0;
  width: 270px;
  padding: 10px 11px;
  border: 1px solid rgba(142, 157, 255, .3);
  border-radius: 9px;
  background: #17203a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
  color: #dce2f7;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
}

.ns-content label.row .ns-help-popover {
  display: none;
}

.ns-help-popover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 6px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 1px solid rgba(142, 157, 255, .3);
  border-bottom: 1px solid rgba(142, 157, 255, .3);
  background: #17203a;
}

.ns-help-wrap.is-open .ns-help-popover {
  display: block;
}

.ns-content label.row .ns-help-wrap.is-open .ns-help-popover {
  display: block;
}

.ns-fleet-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.ns-fleet-table {
  min-width: 920px;
  margin-top: 0 !important;
}

.ns-fleet-table th,
.ns-fleet-table td {
  padding: 12px 10px !important;
  vertical-align: middle !important;
}

.ns-fleet-table tbody tr {
  cursor: pointer;
  transition: background .14s ease;
}

.ns-fleet-table tbody tr:hover,
.ns-fleet-table tbody tr:focus-visible {
  outline: 0;
  background: rgba(142, 157, 255, .08);
}

.ns-device-cell,
.ns-stat-with-spark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ns-device-cell > span:last-child,
.ns-stat-with-spark {
  min-width: 0;
}

.ns-device-cell strong,
.ns-device-cell small {
  display: block;
  white-space: nowrap;
}

.ns-device-cell small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.ns-stat-with-spark {
  gap: 7px;
  white-space: nowrap;
}

.ns-stat-with-spark strong {
  min-width: 42px;
  font-size: 11px;
}

.ns-sparkline {
  width: 76px;
  height: 26px;
  overflow: visible;
}

.ns-sparkline-empty {
  display: inline-block;
  width: 76px;
  color: #58627e;
  text-align: center;
}

.ns-line-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ns-line-chart {
  position: relative;
  min-width: 0;
  padding: 12px 12px 9px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(4, 8, 17, .3);
}

.ns-line-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
}

.ns-line-chart-head strong {
  color: var(--ink);
  font-size: 12px;
}

.ns-line-chart svg {
  display: block;
  width: 100%;
  height: 115px;
  overflow: visible;
}

.ns-line-chart .ns-axis {
  position: static;
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: #68718c;
  font-size: 8px;
}

.ns-line-chart-empty {
  display: grid;
  place-items: center;
  min-height: 162px;
  padding: 16px;
  border: 1px dashed rgba(142, 157, 255, .22);
  border-radius: 9px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.ns-line-chart-empty small {
  display: block;
  max-width: 180px;
  margin-top: 6px;
  color: #68718c;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .ns-line-chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the global brand visually centered and proportionate to the 70px app bar. */
.ns-global-top {
  height: 72px !important;
  min-height: 72px;
  padding: 0 32px !important;
  display: flex;
  align-items: center !important;
}

.ns-global-top .brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* The header logo follows the theme: the dark tile on dark, the outlined mark on light. */
.ns-global-top .brand .logo-mark-light { display: none; }
html[data-theme="light"] .ns-global-top .brand .logo-mark-dark { display: none; }
/* On the light theme the outlined mark sits on a soft grey tile with rounded corners, so it stands out from white. */
html[data-theme="light"] .ns-global-top .brand .logo-mark-light {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px;
  background: #d6dce8;
  border: 1px solid rgba(23, 32, 51, .12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(23, 32, 51, .08);
}

.ns-global-top .brand .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
}

.ns-global-top .brand > span:nth-child(2) {
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.04em;
}

.ns-global-top .brand .brand-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 7px;
  padding: 0 18px 0 16px;
  color: #bfc8f2;
  background: linear-gradient(135deg, rgba(142, 157, 255, .18), rgba(142, 157, 255, .07));
  border: 1px solid rgba(142, 157, 255, .3);
  border-radius: 5px 8px 8px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 7px 50%);
  box-shadow: 0 5px 16px rgba(55, 69, 160, .16);
}

.ns-global-top .brand .brand-flag::before {
  content: "";
  width: 3px;
  height: 13px;
  margin-right: 8px;
  border-radius: 3px;
  background: #8e9dff;
  box-shadow: 0 0 10px rgba(142, 157, 255, .5);
}

@media (max-width: 680px) {
  .ns-global-top .brand .brand-flag {
    display: none;
  }
}

/* Shared dropdown treatment for workspace, account, region, and environment controls. */
.ns-dropdown {
  position: relative;
}

.ns-workspace {
  padding: 0;
  overflow: visible;
}

.ns-workspace-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 66px;
  padding: 13px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ns-workspace-trigger:hover,
.ns-workspace.is-open .ns-workspace-trigger {
  background: rgba(142, 157, 255, .09);
}

.ns-workspace-trigger > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.ns-dropdown-menu {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  min-width: 225px;
  padding: 6px;
  border: 1px solid rgba(142, 157, 255, .25);
  border-radius: 10px;
  background: #151d33;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .42);
}

.ns-dropdown.is-open > .ns-dropdown-menu {
  display: block;
}

.ns-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.ns-dropdown-menu button:hover {
  background: rgba(142, 157, 255, .12);
}

.ns-dropdown-menu button span,
.ns-dropdown-user span,
.ns-dropdown-kicker {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.ns-dropdown-kicker {
  padding: 5px 10px 4px;
  color: #7782a3;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ns-dropdown-user {
  padding: 8px 10px 10px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ns-dropdown-user strong {
  font-size: 11px;
}

.ns-workspace-menu {
  top: calc(100% - 12px);
  left: 0;
  right: auto;
  min-width: 210px;
}

.ns-profile-dropdown .ns-dropdown-menu {
  top: calc(100% + 8px);
}

.ns-filter-menu {
  top: calc(100% + 7px);
  min-width: 185px;
}

.ns-context-row .ns-dropdown {
  flex: 0 0 auto;
}

.ns-context-row .ns-filter-button {
  min-width: 112px;
  height: 32px;
}

.ns-context-row .ns-dropdown:last-child .ns-filter-button {
  min-width: 112px;
}

/* Keep the global search, notification control, and account control on one visual rhythm. */
.ns-content label.ns-global-search ,
and account control on one visual rhythm. */
.ns-header-actions label.ns-global-search {
  display: flex;
  align-items: center;
  width: 260px;
  height: 38px;
  max-width: 260px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ns-content .ns-global-search input ,
.ns-header-actions .ns-global-search input {
  width: auto !important;
  min-width: 0;
  flex: 1 1 auto;
  height: 28px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ns-content .ns-global-search input:focus ,
.ns-header-actions .ns-global-search input:focus {
  border: 0;
  box-shadow: none;
}

.ns-content .ns-global-search kbd ,
.ns-header-actions .ns-global-search kbd {
  flex: 0 0 auto;
  line-height: 1;
}

.ns-content .ns-toolbar-actions ,
.ns-header-actions .ns-toolbar-actions {
  position: relative;
  align-items: center;
}

.ns-content .ns-toolbar-actions > .ns-icon-button,
.ns-content .ns-toolbar-actions > .ns-user-button ,
.ns-header-actions .ns-toolbar-actions > .ns-icon-button,
.ns-header-actions .ns-toolbar-actions > .ns-user-button {
  height: 38px;
}

.ns-content .ns-user-button ,
.ns-header-actions .ns-user-button {
  min-height: 38px;
  padding: 5px 9px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: var(--ink);
}

.ns-content .ns-user-button:hover ,
.ns-header-actions .ns-user-button:hover {
  background: rgba(142, 157, 255, .09);
}

.ns-content .ns-dropdown-menu button ,
.ns-header-actions .ns-dropdown-menu button {
  border: 0;
  background: transparent;
  color: var(--ink);
}

.ns-content .ns-dropdown-menu button:hover ,
.ns-header-actions .ns-dropdown-menu button:hover {
  background: rgba(142, 157, 255, .12);
  color: var(--ink);
}

.ns-demo-notice {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(246, 203, 118, .35);
  border-radius: 8px;
  background: rgba(246, 203, 118, .1);
  color: #9c7218;
  font-size: 10px;
  font-weight: 700;
}

/* Give every native form dropdown the same comfortable arrow spacing. */
.ns-content select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #8992ad 50%),
    linear-gradient(135deg, #8992ad 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ns-content .ns-filter-button {
  padding-right: 14px;
}

.ns-appearance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ns-appearance-copy {
  min-width: 0;
}

.ns-appearance-copy p {
  margin: 5px 0 0;
}

.ns-content button.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 132px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(142, 157, 255, .32);
  border-radius: 999px;
  background: rgba(142, 157, 255, .1);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.theme-switch-track {
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(89, 104, 219, .28);
  background: #cbd2df;
  box-shadow: inset 0 1px 2px rgba(23, 32, 51, .12);
}

.theme-switch-thumb {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8997ff;
  color: #111832;
  font-size: 11px;
  line-height: 1;
  transition: transform .16s ease, background .16s ease;
}

.theme-switch.is-light .theme-switch-thumb {
  transform: translateX(18px);
  background: #f6cb76;
}

.theme-switch.is-light .theme-switch-track {
  border-color: #aeb8c8;
  background: #dfe3ea;
}

@media (max-width: 680px) {
  .ns-appearance-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

.ns-content .ns-search-results ,
.ns-header-actions .ns-search-results {
  top: 46px;
  right: 0;
  width: 330px;
  max-width: min(330px, calc(100vw - 28px));
}

@media (max-width: 680px) {
  .ns-content label.ns-global-search ,
.ns-header-actions label.ns-global-search {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
  }
  .ns-content .ns-search-results ,
.ns-header-actions .ns-search-results {
    left: 0;
    right: auto;
    width: min(330px, calc(100vw - 28px));
  }
}

/* Use one clear on/off control language throughout the operations workspace. */
.ns-content input[type="checkbox"],
.ns-content #conn-private {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 38px !important;
  min-width: 38px;
  height: 22px !important;
  min-height: 22px;
  flex: 0 0 38px !important;
  margin: 0;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .08);
  background-image: radial-gradient(circle at 10px 10px, #8993ae 0 6px, transparent 6.5px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, background-position .16s ease;
}

.ns-content input[type="checkbox"]:checked,
.ns-content #conn-private:checked {
  border-color: rgba(119, 224, 192, .48);
  background-color: rgba(119, 224, 192, .28);
  background-image: radial-gradient(circle at 28px 10px, #b4f4de 0 6px, transparent 6.5px);
}

.ns-content input[type="checkbox"]:focus-visible,
.ns-content #conn-private:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(142, 157, 255, .22);
}

.org-logo-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 900px;
  padding: 14px;
  border: 1px solid rgba(142, 157, 255, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(142, 157, 255, .08), rgba(255, 255, 255, .025));
}

.org-logo-preview {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  border: 1px solid rgba(142, 157, 255, .28);
  border-radius: 14px;
  background: linear-gradient(140deg, #7b8aff, #4656cf);
  box-shadow: 0 8px 22px rgba(50, 62, 160, .24);
}

.org-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b1020;
}

.org-logo-placeholder {
  color: #f4f6ff;
  font-size: 24px;
  font-weight: 800;
}

.org-logo-copy {
  min-width: 0;
}

.org-logo-copy strong,
.org-logo-copy > span {
  display: block;
}

.org-logo-copy strong {
  color: var(--ink);
  font-size: 12px;
}

.org-logo-copy > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.org-logo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.org-upload-button {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 10px;
  border: 1px solid rgba(142, 157, 255, .34);
  border-radius: 7px;
  background: linear-gradient(135deg, #8997ff, #6677f5);
  color: #10152b !important;
  cursor: pointer;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.org-logo-actions input[type="file"] {
  display: none;
}

.org-logo-actions button {
  padding: 7px 10px;
}

@media (max-width: 560px) {
  .org-logo-picker {
    align-items: flex-start;
  }
  .org-logo-actions {
    flex-wrap: wrap;
  }
}

.ns-compliance {
  display: grid;
  gap: 16px;
}

.ns-compliance-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ns-compliance-hero h2 {
  margin: 6px 0;
}

.ns-compliance-hero p {
  max-width: 720px;
  margin-bottom: 0;
}

.ns-compliance-score {
  min-width: 150px;
  padding: 18px 20px;
  border: 1px solid rgba(142, 157, 255, .25);
  border-radius: 12px;
  background: rgba(120, 137, 255, .08);
  text-align: center;
}

.ns-compliance-score strong {
  display: block;
  font-size: 28px;
}

.ns-compliance-score span,
.ns-control-row small,
.ns-evidence-link small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.ns-control-row,
.ns-evidence-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: transparent;
  color: inherit;
  text-align: left;
}

.ns-control-row:last-child,
.ns-evidence-link:last-child {
  border-bottom: 0;
}

.ns-control-row > span:nth-child(2),
.ns-evidence-link > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ns-control-row > strong {
  color: var(--mint, #91e4c4);
  font-size: 11px;
}

.ns-control-row:has(.warn) > strong {
  color: var(--amber, #f6d77a);
}

.ns-control-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(99, 220, 177, .12);
  color: var(--mint, #91e4c4);
}

.ns-control-icon.warn {
  background: rgba(246, 215, 122, .12);
  color: var(--amber, #f6d77a);
}

.ns-content button.ns-evidence-link {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 13px 0;
}

.ns-content button.ns-evidence-link:hover {
  color: var(--accent, #aeb8ff);
}

.ns-evidence-link > span:first-child {
  font-size: 18px;
  color: var(--accent, #aeb8ff);
}

.ns-evidence-link > strong {
  color: var(--accent, #aeb8ff);
}

@media (max-width: 760px) {
  .ns-compliance-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .ns-compliance-score {
    width: 100%;
  }
}

/* Light workspace theme. Keep the same hierarchy and accents, but replace every
   dark surface/text pairing so the authenticated pages remain readable. */
html[data-theme="light"] {
  --ink: #172033;
  --muted: #65718a;
  --line: rgba(23, 32, 51, .14);
  --accent: #5968db;
  --accent-2: #238b72;
  --danger: #c74458;
  --mint: #238b72;
  --amber: #a36d00;
  --shadow: 0 24px 70px rgba(42, 55, 87, .16);
}

html[data-theme="light"] body { background: #f4f6fb; color: var(--ink); }
html[data-theme="light"] .ns-global-top { background: rgba(255, 255, 255, .9); border-color: rgba(23, 32, 51, .1); }
html[data-theme="light"] .ns-global-top .brand .brand-flag { color: #4e5ba8; background: linear-gradient(135deg, rgba(89, 104, 219, .13), rgba(89, 104, 219, .04)); border-color: rgba(89, 104, 219, .28); }
html[data-theme="light"] .ns-shell { background: #f4f6fb; }
html[data-theme="light"] .ns-sidebar { background: #ffffff; border-color: rgba(23, 32, 51, .1); }

html[data-theme="light"] .ns-workspace,
html[data-theme="light"] .ns-stat-card,
html[data-theme="light"] .ns-device-stat,
html[data-theme="light"] .ns-panel,
html[data-theme="light"] .ns-content > .card,
html[data-theme="light"] .ns-content > .card:has(table) {
  background: #ffffff !important;
  border-color: rgba(23, 32, 51, .12);
  box-shadow: 0 7px 24px rgba(42, 55, 87, .045);
}

html[data-theme="light"] .ns-nav-item { color: #65718a; }
html[data-theme="light"] .ns-nav-item:hover { background: rgba(89, 104, 219, .07); color: #263353; }
html[data-theme="light"] .ns-nav-item.active { color: #303d85; background: rgba(89, 104, 219, .11); box-shadow: inset 2px 0 0 #5968db; }
html[data-theme="light"] .ns-context-row { border-color: rgba(23, 32, 51, .12); }

html[data-theme="light"] .ns-content input,
html[data-theme="light"] .ns-content select,
html[data-theme="light"] .ns-content textarea {
  background-color: #ffffff;
  border-color: rgba(23, 32, 51, .18);
  color: #172033;
}

html[data-theme="light"] .ns-content input[type="checkbox"],
html[data-theme="light"] .ns-content #conn-private {
  border-color: rgba(89, 104, 219, .2);
  background-color: #e9edf6;
  background-image: radial-gradient(circle at 10px 10px, #8793ad 0 6px, transparent 6.5px);
}

html[data-theme="light"] .ns-content input[type="checkbox"]:checked,
html[data-theme="light"] .ns-content #conn-private:checked {
  border-color: rgba(76, 183, 154, .48);
  background-color: #d7f4eb;
  background-image: radial-gradient(circle at 28px 10px, #72d3b7 0 6px, transparent 6.5px);
}

html[data-theme="light"] .ns-content button.ns-help-trigger {
  border-color: rgba(89, 104, 219, .28);
  background: #f0f2ff;
  color: #6674c7;
}

html[data-theme="light"] .ns-content input::placeholder,
html[data-theme="light"] .ns-content textarea::placeholder { color: #8a94a8; }
html[data-theme="light"] .ns-content label,
html[data-theme="light"] .ns-form-section h4 { color: #53617c; }
html[data-theme="light"] .ns-content button.link-button,
html[data-theme="light"] .ns-search-type { color: #4f60c2; }
html[data-theme="light"] .ns-content .ns-filter-button,
html[data-theme="light"] .ns-content button.ghost,
html[data-theme="light"] .ns-content .ghost,
html[data-theme="light"] .ns-global-search ,
html[data-theme="light"] .ns-header-actions .ns-filter-button,
html[data-theme="light"] .ns-header-actions button.ghost,
html[data-theme="light"] .ns-header-actions .ghost { background: #ffffff; border-color: rgba(23, 32, 51, .14); color: #65718a; }

html[data-theme="light"] .ns-content button:not(.ghost):not(.danger):not(.link-button):not(.ns-help-trigger):not(.theme-switch):not(.ns-filter-button):not(.ns-evidence-link):not(.ns-user-button) ,
html[data-theme="light"] .ns-header-actions button:not(.ghost):not(.danger):not(.link-button):not(.ns-help-trigger):not(.theme-switch):not(.ns-filter-button):not(.ns-evidence-link):not(.ns-user-button) {
  background: #5968db;
  border-color: #5968db;
  color: #ffffff;
}

html[data-theme="light"] .ns-content button:not(.ghost):not(.danger):not(.link-button):not(.ns-help-trigger):not(.theme-switch):not(.ns-filter-button):not(.ns-evidence-link):not(.ns-user-button):hover ,
html[data-theme="light"] .ns-header-actions button:not(.ghost):not(.danger):not(.link-button):not(.ns-help-trigger):not(.theme-switch):not(.ns-filter-button):not(.ns-evidence-link):not(.ns-user-button):hover {
  background: #4857c8;
  border-color: #4857c8;
}

html[data-theme="light"] .ns-content .ns-user-button ,
html[data-theme="light"] .ns-header-actions .ns-user-button {
  border: 1px solid rgba(23, 32, 51, .14);
  border-radius: 9px;
  background: #ffffff;
  color: #26334d;
  padding: 5px 9px 5px 6px;
}

html[data-theme="light"] .ns-content .ns-user-button:hover ,
html[data-theme="light"] .ns-header-actions .ns-user-button:hover {
  background: rgba(89, 104, 219, .06);
  color: #4f60c2;
}

html[data-theme="light"] .ns-content select {
  background-image:
    linear-gradient(45deg, transparent 50%, #53617c 50%),
    linear-gradient(135deg, #53617c 50%, transparent 50%);
}
html[data-theme="light"] .ns-content td { color: #26334d; }
html[data-theme="light"] .ns-content th { color: #6b7892; }

/* Keep table content centered when an action control makes a row taller. */
.ns-content table th,
.ns-content table td {
  vertical-align: middle;
}

html[data-theme="light"] .ns-content th,
html[data-theme="light"] .ns-content td,
html[data-theme="light"] .ns-health-list > div,
html[data-theme="light"] .ns-activity,
html[data-theme="light"] .ns-detail-list div,
html[data-theme="light"] .ns-device-runs > div { border-color: rgba(23, 32, 51, .1); }

html[data-theme="light"] .ns-dropdown-menu,
html[data-theme="light"] .ns-search-results { background: #ffffff; border-color: rgba(89, 104, 219, .22); box-shadow: 0 18px 40px rgba(42, 55, 87, .16); }
html[data-theme="light"] .ns-dropdown-menu button:hover,
html[data-theme="light"] .ns-search-result:hover { background: rgba(89, 104, 219, .08); }
html[data-theme="light"] .ns-content .ns-dropdown-menu button ,
html[data-theme="light"] .ns-header-actions .ns-dropdown-menu button {
  border: 0 !important;
  background: transparent !important;
  color: #26334d !important;
}
html[data-theme="light"] .ns-content .ns-dropdown-menu button:hover ,
html[data-theme="light"] .ns-header-actions .ns-dropdown-menu button:hover {
  background: rgba(89, 104, 219, .08) !important;
  border-color: transparent !important;
  color: #303d85 !important;
}
html[data-theme="light"] .ns-dropdown-menu button,
html[data-theme="light"] .ns-search-result { color: #26334d; }
html[data-theme="light"] .ns-dropdown-user { border-color: rgba(23, 32, 51, .1); }

html[data-theme="light"] .ns-fleet-table tbody tr:hover,
html[data-theme="light"] .ns-fleet-table tbody tr:focus-visible,
html[data-theme="light"] .ns-agent-card:hover,
html[data-theme="light"] .ns-agent-card:focus { background: rgba(89, 104, 219, .07); }
html[data-theme="light"] .ns-agent-card { background: #ffffff; border-color: rgba(23, 32, 51, .12); }
html[data-theme="light"] .ns-device-hero { background: linear-gradient(135deg, rgba(89, 104, 219, .1), rgba(255, 255, 255, .8)); border-color: rgba(89, 104, 219, .22); }
html[data-theme="light"] .ns-form-section,
html[data-theme="light"] .ns-form-section #job-connections { border-color: rgba(23, 32, 51, .1); }
html[data-theme="light"] .ns-form-section #job-connections { background: #f7f8fc; }
html[data-theme="light"] .org-logo-picker { background: #f7f8fc; border-color: rgba(23, 32, 51, .12); }
html[data-theme="light"] .org-logo-preview img { background: #f1f3f8; }
html[data-theme="light"] .org-upload-button { background: #5968db; border-color: #5968db; color: #ffffff !important; }
html[data-theme="light"] .ns-control-row,
html[data-theme="light"] .ns-evidence-link { border-color: rgba(23, 32, 51, .1); }

html[data-theme="light"] .ns-content pre,
html[data-theme="light"] .ns-content .token-box,
html[data-theme="light"] .ns-form-section textarea.job-editor,
html[data-theme="light"] .ns-content #script-body,
html[data-theme="light"] .ns-content #script-version-body,
html[data-theme="light"] .ns-content #script-params,
html[data-theme="light"] .ns-content #script-version-params {
  background: #f1f3f8;
  color: #26334d;
  border-color: rgba(23, 32, 51, .15);
}

html[data-theme="light"] .ns-help-popover { background: #ffffff; border-color: rgba(89, 104, 219, .3); color: #26334d; box-shadow: 0 16px 36px rgba(42, 55, 87, .18); }
html[data-theme="light"] .ns-help-popover::after { background: #ffffff; border-color: rgba(89, 104, 219, .3); }
html[data-theme="light"] .ns-line-chart {
  background: #ffffff;
  border-color: rgba(23, 32, 51, .12);
}
html[data-theme="light"] .ns-line-chart svg path { stroke: rgba(23, 32, 51, .12); }
html[data-theme="light"] .ns-content .badge.ok,
html[data-theme="light"] .ns-content .badge.approved {
  border-color: #b9dfd0;
  background: #e2f4ed;
  color: #176849;
}
html[data-theme="light"] .ns-content .badge.pending {
  border-color: #d6dcef;
  background: #f1f3fb;
  color: #5d6a91;
}
html[data-theme="light"] .ns-demo-notice {
  border-color: #cbd4f5;
  background: #eef1ff;
  color: #5362a9;
}
html[data-theme="light"] .ns-live-dot {
  background: #238b72;
  box-shadow: 0 0 0 4px rgba(35, 139, 114, .12);
}
html[data-theme="light"] .health-dot.ok {
  background: #238b72;
  box-shadow: 0 0 0 4px rgba(35, 139, 114, .12);
}

html[data-theme="light"] main[data-page="setup"],
html[data-theme="light"] :is(main[data-page="signin"],main[data-page="signup"]),
html[data-theme="light"] main[data-page="factor"],
html[data-theme="light"] main[data-page="invite"] { background: radial-gradient(700px 420px at 50% 0%, rgba(89, 104, 219, .13), transparent 70%); }
html[data-theme="light"] main[data-page="setup"] .card,
html[data-theme="light"] :is(main[data-page="signin"],main[data-page="signup"]) .card,
html[data-theme="light"] main[data-page="factor"] .card,
html[data-theme="light"] main[data-page="invite"] .card { background: #ffffff; border-color: rgba(89, 104, 219, .2); box-shadow: 0 24px 70px rgba(42, 55, 87, .14); }

/* Notification count on the bell. Light uses a deeper red so the digits stay readable on white. */
.ns-count{margin-left:6px;background:rgba(255,142,155,.18);color:#ff8e9b;border-radius:999px;padding:1px 6px;font-size:9px}
html[data-theme="light"] .ns-count{background:rgba(190,24,60,.12);color:#9f1239}

/* Run details in a draggable window. Uses the site colours and card look; the window floats, so it has a solid surface. */
.popout{position:fixed;top:96px;right:40px;width:min(760px,94vw);max-height:80vh;overflow:auto;background:#10172a;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.45);z-index:1000;font-size:13px}
.popout-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;cursor:move;user-select:none;border-bottom:1px solid var(--line);position:sticky;top:0;background:#10172a;border-radius:14px 14px 0 0}
.popout-head strong{font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.popout-body{padding:16px 18px 18px}
.popout .run-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.popout .run-stats dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin:0}
.popout .run-stats dd{margin:5px 0 0;color:var(--ink);font-size:14px;font-weight:600}
.popout .charts{display:grid;gap:14px;margin-top:14px}
.popout .chart{margin:0;padding:12px 12px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.popout .chart figcaption{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.popout .chart-wrap{position:relative}
.popout .chart svg{width:100%;height:auto;display:block}
.popout .chart-grid{stroke:var(--line);stroke-width:1}
.popout .chart-tick{fill:var(--muted);font-size:10px}
.popout .chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.popout .chart-cursor{stroke:var(--muted);stroke-dasharray:3 3}
.popout .chart-dot{fill:var(--accent-2);stroke:#10172a;stroke-width:2}
.popout .chart-tip{position:absolute;pointer-events:none;background:#0c1222;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px;color:var(--ink);white-space:nowrap}
.popout .chart-tip[hidden]{display:none}
.popout .chart-note{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0 0;background:rgba(255,255,255,.025)}
.popout .chart-note strong{display:block;margin-bottom:6px;font-size:13px}
.popout .chart-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.popout .muted{color:var(--muted)}

/* Output in the run details window */
.popout .popout-output-wrap{display:grid;gap:12px;margin-top:14px}
.popout .popout-output h4{margin:0 0 6px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.popout pre{margin:0;background:#0a0f1e;border:1px solid var(--line);border-radius:10px;padding:12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* Service version under Sign out. Terms and Privacy match this muted text in both themes. */
.ns-service-version{padding:10px 14px 4px;color:var(--muted);font-size:11px}
.ns-service-version a,
.ns-service-version a:link,
.ns-service-version a:visited,
.ns-service-version a:active{
  color:var(--muted);
  text-decoration:none;
}
.ns-service-version a:hover{color:var(--ink);text-decoration:none}

/* The header is 72px. Keep the shell, and the sidebar inside it, to the space under that bar
   so the flex spacer cannot grow the page. The spacer still sinks the footer on a tall window
   and shrinks to a small gap when the window is short. */
@media (min-width:681px){
  .ns-shell{
    height:calc(100vh - 72px);
    min-height:calc(100vh - 72px);
    max-height:calc(100vh - 72px);
  }
  .ns-sidebar{
    height:100%;
    min-height:0;
    max-height:100%;
    overflow:hidden;
  }
  .ns-content{
    min-height:0;
    overflow:auto;
  }
  .ns-sidebar-spacer{
    flex:1 1 auto;
    min-height:0;
  }
}

/* Fifteen nav rows at the normal 40px height, plus the footer, are taller than
   the space under the header until the window is about 900px tall. Below that,
   tighten only the vertical padding so Terms and Privacy stay on screen.
   Taller windows keep the original row height, and the spacer still sinks the
   footer to the bottom. */
@media (min-width:681px) and (max-height:880px){
  .ns-sidebar{padding-top:10px;padding-bottom:10px}
  .ns-nav-label{margin-top:6px;margin-bottom:4px}
  .ns-nav-item{padding-top:4px;padding-bottom:4px}
  .ns-service-version{padding-top:4px;padding-bottom:2px}
}

/* Workspace search dropdown. Its rows are plain result rows in both themes, not the workspace's primary buttons. */
.ns-search-results { max-height: 70vh; overflow-y: auto; }
.ns-content .ns-search-results button.ns-search-result,
.ns-search-results button.ns-search-result ,
.ns-header-actions .ns-search-results button.ns-search-result {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-weight: 400;
  min-width: 0;
  padding: 9px;
  align-items: flex-start;
}
.ns-search-result:hover { background: rgba(142, 157, 255, .12) !important; }
.ns-search-result > span:nth-child(2) { flex: 1; min-width: 0; }
.ns-search-result b {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-search-result small {
  color: var(--muted) !important;
  font-size: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ns-search-type {
  flex: 0 0 52px;
  font-size: 9px;
  color: #9eabff;
  padding-top: 2px;
}
.ns-search-result > span:last-child { flex: 0 0 auto; color: var(--muted); }
html[data-theme="light"] .ns-search-results button.ns-search-result,
html[data-theme="light"] .ns-content .ns-search-results button.ns-search-result ,
html[data-theme="light"] .ns-header-actions .ns-search-results button.ns-search-result { color: #26334d !important; }
html[data-theme="light"] .ns-search-result:hover { background: rgba(89, 104, 219, .08) !important; }
html[data-theme="light"] .ns-search-result small { color: #5d6b86 !important; }
html[data-theme="light"] .ns-search-type { color: #4f60c2; }

/* Filter dropdown lists (the searchable selects). Plain rows in both themes, not the workspace's primary buttons. */
.ns-content .ns-combo-list button,
.ns-combo-list button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-weight: 400;
}
.ns-content .ns-combo-list button:hover,
.ns-content .ns-combo-list button.active,
.ns-combo-list button:hover,
.ns-combo-list button.active { background: rgba(142, 157, 255, .16) !important; }
html[data-theme="light"] .ns-content .ns-combo-list button,
html[data-theme="light"] .ns-combo-list button { color: #26334d !important; }
html[data-theme="light"] .ns-content .ns-combo-list button:hover,
html[data-theme="light"] .ns-content .ns-combo-list button.active,
html[data-theme="light"] .ns-combo-list button:hover,
html[data-theme="light"] .ns-combo-list button.active { background: rgba(89, 104, 219, .1) !important; }

/* The Documentation link in the sidebar looks like the other nav items. */
a.ns-nav-item { text-decoration: none; }

/* Loading state: the mark and a spinner, centred, in both themes. Motion is slowed for people who ask for less. */
.ns-loading { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; color: var(--muted, #5d6b86); padding: 24px; }
/* Self-hosted licence: banner on every page, and the licence card. */
.ns-license-banner { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; border: 1px solid; font-size: 12px; line-height: 1.5; }
.ns-license-banner.warn { color: #f6cb76; background: rgba(246, 203, 118, 0.1); border-color: rgba(246, 203, 118, 0.35); }
.ns-license-banner.fail { color: var(--danger, #ff8e9b); background: rgba(255, 142, 155, 0.1); border-color: rgba(255, 142, 155, 0.4); }
.ns-license-banner b { font-variant-numeric: tabular-nums; }
.ns-license-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 11px; }
.ns-license-row span { color: var(--muted, #8992ad); }
.ns-license-row strong { text-align: right; overflow-wrap: anywhere; }
.ns-license-error { color: var(--danger, #ff8e9b); font-size: 11px; margin: 12px 0 0; }
.ns-license-form textarea { width: 100%; font-family: "DM Mono", monospace; font-size: 11px; }
.ns-license-form button { margin-top: 10px; }
/* Notifications: the bell, and the list it opens. Each theme sets its own colours, so the bell matches the search box and the account button. */
.ns-header-actions .ns-notifications-dropdown > .ns-icon-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  box-shadow: none;
}
.ns-header-actions .ns-notifications-dropdown > .ns-icon-button:hover { background: rgba(142, 157, 255, 0.09); }
html[data-theme="light"] .ns-header-actions .ns-notifications-dropdown > .ns-icon-button {
  background: #ffffff;
  border-color: rgba(23, 32, 51, 0.14);
  color: #26334d;
}
.ns-header-actions .ns-notifications-menu {
  width: 340px;
  max-width: min(340px, calc(100vw - 28px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
}
.ns-header-actions .ns-notifications-menu .ns-notification-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}
.ns-header-actions .ns-notifications-menu .ns-notification-row:hover { background: rgba(142, 157, 255, 0.08); }
.ns-header-actions .ns-notifications-menu .ns-notification-open {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.ns-header-actions .ns-notifications-menu .ns-notification-open strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  white-space: normal;
}
.ns-header-actions .ns-notifications-menu .ns-notification-open span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
}
.ns-header-actions .ns-notifications-menu .ns-notification-row .ns-notification-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: 26px;
  margin-right: 4px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 1;
}
.ns-header-actions .ns-notifications-menu .ns-notification-row .ns-notification-remove:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; }
.ns-header-actions .ns-notifications-menu .ns-notification-clear { display: flex; justify-content: flex-end; padding: 8px 10px 4px; }
.ns-header-actions .ns-notifications-menu .ns-notification-clear button { padding: 5px 10px; font-size: 11px; }
html[data-theme="light"] .ns-header-actions .ns-notifications-menu .ns-notification-open strong { color: #26334d; }
html[data-theme="light"] .ns-header-actions .ns-notifications-menu .ns-notification-open span { color: #65718a; }
html[data-theme="light"] .ns-header-actions .ns-notifications-menu .ns-notification-row:hover { background: rgba(89, 104, 219, 0.08); }
html[data-theme="light"] .ns-header-actions .ns-notifications-menu .ns-notification-row .ns-notification-remove { color: #65718a !important; }
.ns-loading p { margin: 0; font-size: 14px; }
.ns-loading-mark { width: 56px; height: 56px; border-radius: 14px; opacity: .92; }
.ns-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(128, 140, 200, .25); border-top-color: #7b8aff; animation: ns-spin .8s linear infinite; }
@keyframes ns-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ns-spinner { animation-duration: 3s; } }

/* Search, notifications and account sit at the top right of the header, on every page. */
.ns-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  position: relative;
  min-width: 0;
}
.ns-header-actions .ns-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
}
@media (max-width: 680px) {
  .ns-global-top { padding: 0 14px !important; }
  .ns-header-actions { gap: 6px; }
  .ns-header-actions label.ns-global-search { width: 124px; max-width: 124px; padding: 0 8px; }
  .ns-header-actions .ns-global-search kbd { display: none; }
}

/* Header sits above the page, so its menus (notifications, account) are not covered by page menus such as All regions. */
.ns-global-top {
  position: relative;
  z-index: 50;
}
/* The unread count sits on the corner of the bell, like a badge, not beside it. */
.ns-header-actions .ns-notifications-dropdown > .ns-icon-button { position: relative; }
.ns-header-actions .ns-notifications-dropdown > .ns-icon-button .ns-count {
  position: absolute;
  top: -7px;
  right: -7px;
  margin: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
}
/* Remove buttons: the × is centred in its box, and the box sits flush with the row's right edge. */
.ns-header-actions .ns-notifications-menu .ns-notification-row .ns-notification-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 0;
  width: 28px;
  height: 28px;
  min-height: 28px;
  line-height: 1;
}
.ns-header-actions .ns-notifications-menu .ns-notification-clear { display: block; text-align: center; justify-content: center; }
.ns-header-actions .ns-notifications-menu .ns-notification-clear button { text-align: center; }

/* Search results in the header are solid, like the other menus, so the page never shows through them. */
.ns-header-actions .ns-search-results {
  background: #151d33;
  border: 1px solid rgba(142, 157, 255, 0.25);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42);
  opacity: 1;
  backdrop-filter: none;
}
html[data-theme="light"] .ns-header-actions .ns-search-results {
  background: #ffffff;
  border-color: rgba(89, 104, 219, 0.22);
  box-shadow: 0 18px 40px rgba(42, 55, 87, 0.16);
}

/* Search results open directly under the search box, left-aligned with it. */
.ns-search-anchor { position: relative; }
.ns-header-actions .ns-search-anchor > .ns-search-results {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: max(100%, 320px);
  max-width: min(380px, calc(100vw - 28px));
  z-index: 60;
}
@media (max-width: 680px) {
  .ns-header-actions .ns-search-anchor > .ns-search-results {
    left: auto;
    right: 0;
    width: min(380px, calc(100vw - 28px));
  }
}