/*
 * Nodes24 modern skin
 *
 * This file owns only shared modern-skin tokens/base rules and composes
 * component files. Page-specific layout must not be added here.
 */

:root {
  --skin-text: #dce3f0;
  --skin-title: #f5f7ff;
  --skin-muted: #9faac0;
  --skin-surface: #23273b;
  --skin-page: #1a1d2f;
  --skin-border: #363d59;
  --skin-accent: #9b8cff;
  --skin-hover: #2b304c;
  --skin-control-bg: #1f2336;
  --skin-control-text: #e6eaf4;
  --skin-control-border: #3d4564;
  --skin-menu: #303452;
  --skin-menu-text: #f7f8ff;
  --skin-menu-hover-text: #ffffff;
  --skin-menu-hover: #9b8cff;
  --skin-menu-dropdown: #393e60;
  --skin-menu-mega: #343959;
  --skin-menu-border: #59628d;
  --coin-ticker-margin-top: 66px;
}

html body,
html body input,
html body select,
html body button,
html body textarea {
  font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
}

/* Page/table titles become typography instead of another box. */
html body .tableTextTitle {
  color: var(--skin-title) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  padding: 8px 2px 17px !important;
  margin-bottom: 4px !important;
}

/* Nova only: keep the icon fixed and add breathing room before brand text. */
html body .flex-wrapper > nav .wrapper > .logo > a:last-child {
  margin-left: 10px !important;
}

/* Modern DataTables skin. Shared table appearance belongs here, never in page CSS. */
html body table.dataTable,
html body .dt-container table.dataTable,
html body .dt-scroll table.dataTable,
html body .dt-scroll-head table.dataTable,
html body .dt-scroll-body table.dataTable {
  background: transparent !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
  box-shadow: none !important;
}

html body .n24-datatable-panel .dt-container {
  display: block;
  width: fit-content;
  max-width: 100%;
}

html body .dt-scroll-head,
html body .dt-scroll-headInner,
html body .dt-scroll-body,
html body .dt-scroll-foot,
html body .dt-scroll-footInner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .dt-container table.dataTable > thead,
html body .dt-container table.dataTable > thead > tr,
html body .dt-container table.dataTable > thead > tr > th,
html body .dt-container table.dataTable > thead > tr > td,
html body .dt-scroll-head table.dataTable > thead,
html body .dt-scroll-head table.dataTable > thead > tr,
html body .dt-scroll-head table.dataTable > thead > tr > th,
html body .dt-scroll-head table.dataTable > thead > tr > td,
html body table.dataTable > thead > tr > th,
html body table.dataTable > thead > tr > td {
  background: transparent !important;
  background-image: none !important;
  color: var(--skin-muted) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  padding-top: 7px !important;
  padding-bottom: 9px !important;
}

html body table.dataTable > thead > tr > th span.dt-column-order,
html body table.dataTable > thead > tr > td span.dt-column-order {
  opacity: 1 !important;
}
html body table.dataTable > thead > tr > th span.dt-column-order:before,
html body table.dataTable > thead > tr > th span.dt-column-order:after,
html body table.dataTable > thead > tr > td span.dt-column-order:before,
html body table.dataTable > thead > tr > td span.dt-column-order:after {
  color: var(--skin-muted) !important;
  opacity: .30 !important;
  -webkit-text-stroke: 0 !important;
  transition: opacity .15s ease, color .15s ease;
}
html body table.dataTable > thead > tr > th:hover span.dt-column-order:before,
html body table.dataTable > thead > tr > th:hover span.dt-column-order:after,
html body table.dataTable > thead > tr > td:hover span.dt-column-order:before,
html body table.dataTable > thead > tr > td:hover span.dt-column-order:after {
  color: #9b8cff !important;
  opacity: .68 !important;
}
html body table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:before,
html body table.dataTable > thead > tr > td.dt-ordering-asc span.dt-column-order:before,
html body table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:after,
html body table.dataTable > thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  color: #9b8cff !important;
  opacity: 1 !important;
}
html body table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:after,
html body table.dataTable > thead > tr > td.dt-ordering-asc span.dt-column-order:after,
html body table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:before,
html body table.dataTable > thead > tr > td.dt-ordering-desc span.dt-column-order:before {
  color: var(--skin-muted) !important;
  opacity: .18 !important;
}

/* scrollX keeps a sizing-only header inside the body table. */
html body .dt-scroll-body table.dataTable > thead > tr {
  height: 0 !important;
}
html body .dt-scroll-body table.dataTable > thead > tr > th,
html body .dt-scroll-body table.dataTable > thead > tr > td {
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body .dt-scroll-body table.dataTable > thead > tr > th .dt-scroll-sizing,
html body .dt-scroll-body table.dataTable > thead > tr > td .dt-scroll-sizing,
html body .dt-scroll-body table.dataTable > thead > tr > th span.dt-column-order,
html body .dt-scroll-body table.dataTable > thead > tr > td span.dt-column-order {
  height: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
html body .dt-scroll-body {
    margin-top: -15px !important;
}
html body .dt-container table.dataTable > tbody > tr,
html body .dt-scroll-body table.dataTable > tbody > tr,
html body table.dataTable > tbody > tr {
  background: transparent !important;
  box-shadow: none !important;
}
html body .dt-container table.dataTable > tbody > tr > td,
html body .dt-scroll-body table.dataTable > tbody > tr > td,
html body table.dataTable > tbody > tr > td {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border-top: 1px solid var(--skin-border) !important;
  border-bottom: 1px solid var(--skin-border) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  transition: background-color .14s ease, border-color .14s ease !important;
}
html body table.dataTable > tbody > tr > td:first-child {
  border-left: 1px solid var(--skin-border) !important;
  border-top-left-radius: 11px !important;
  border-bottom-left-radius: 11px !important;
}
html body table.dataTable > tbody > tr > td:last-child {
  border-right: 1px solid var(--skin-border) !important;
  border-top-right-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}
html body .dt-container table.dataTable > tbody > tr:hover > td,
html body .dt-scroll-body table.dataTable > tbody > tr:hover > td,
html body table.dataTable > tbody > tr:hover > td {
  background: var(--skin-hover) !important;
}
html body table.dataTable > tbody > tr.selected > td,
html body table.dataTable > tbody > tr.dt-selectable.selected > td {
  background: rgba(66, 59, 104, 1) !important;
  color: rgb(245, 247, 255) !important;
}

html body .dt-container .dt-search input,
html body .dt-container .dt-length select,
html body .dt-container input.dt-input,
html body .dt-container select.dt-input {
  min-height: 36px !important;
  padding: 7px 11px !important;
  color: var(--skin-control-text) !important;
  background: var(--skin-control-bg) !important;
  border: 1px solid var(--skin-control-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .n24-datatable-panel .dt-search input {
  min-width: 205px;
}
html body .dt-container .dt-search input:focus,
html body .dt-container .dt-length select:focus,
html body .dt-container input.dt-input:focus,
html body .dt-container select.dt-input:focus {
  border-color: var(--skin-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 12%, transparent) !important;
}
html body .dt-container .dt-search label,
html body .dt-container .dt-length label,
html body .dt-container .dt-info {
  color: var(--skin-muted) !important;
  font-size: 13px !important;
}
html body .dt-container .dt-layout-row {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
html body .n24-datatable-panel .dt-layout-row {
  gap: 10px;
  align-items: center;
}

/* Keep info and paging in one shared footer row. */
html body .n24-datatable-panel .dt-layout-row:has(.dt-paging) {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box;
  clear: both;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
html body .n24-datatable-panel .dt-layout-row:has(.dt-paging) .dt-layout-start {
  justify-content: flex-start !important;
  margin-right: auto !important;
}
html body .n24-datatable-panel .dt-layout-row:has(.dt-paging) .dt-layout-end {
  justify-content: flex-end !important;
  margin-left: auto !important;
}

/* Paging is a shared skin component. Keep the compact appearance that Nova
 * had before the skin became the final stylesheet in the cascade. */
html body .dt-container .dt-paging {
  box-shadow: none !important;
}
html body .dt-container .dt-paging .dt-paging-button,
html body .dt-container .dt-paging button {
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 2px !important;
  padding: 4px 8px !important;
  color: var(--skin-text) !important;
  background: var(--skin-control-bg) !important;
  background-image: none !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}
html body .dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
html body .dt-container .dt-paging button:hover:not(.disabled) {
  color: var(--skin-menu-hover-text) !important;
  background: var(--skin-menu-hover) !important;
  background-image: none !important;
  border-color: var(--skin-menu-hover) !important;
}
html body .dt-container .dt-paging .dt-paging-button.current,
html body .dt-container .dt-paging button.current {
  color: var(--skin-menu-text) !important;
  background: var(--skin-menu) !important;
  background-image: none !important;
  border-color: var(--skin-menu) !important;
}
html body .dt-container .dt-paging .dt-paging-button.disabled,
html body .dt-container .dt-paging button.disabled {
  opacity: .42 !important;
}

/* Shared horizontal scroller. */
html body .n24-datatable-panel .dt-scroll-body {
  scrollbar-width: thin;
  scrollbar-color: var(--skin-menu-border) var(--skin-page);
}
@supports selector(::-webkit-scrollbar) {
  html body .n24-datatable-panel .dt-scroll-body {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
html body .n24-datatable-panel .dt-scroll-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html body .n24-datatable-panel .dt-scroll-body::-webkit-scrollbar-track {
  background: var(--skin-page);
}
html body .n24-datatable-panel .dt-scroll-body::-webkit-scrollbar-thumb {
  background: var(--skin-menu-border);
  border: 2px solid var(--skin-page);
  border-radius: 8px;
}
html body .n24-datatable-panel .dt-scroll-body::-webkit-scrollbar-thumb:hover {
  background: var(--skin-menu-hover);
}
html body .n24-datatable-panel .dt-scroll-body::-webkit-scrollbar-corner {
  background: var(--skin-page);
}

html body .tableWrapper,
html body .dashboard-table-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* A link may make an entire data cell clickable (Supported Coins does this).
 * Keep normal table content in the row text color; explicit action links can
 * opt into accent styling with their own component class. */
html body table.dataTable > tbody > tr > td a {
  color: inherit !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html body .dt-container button,
html body .dashboard-columns-button {
  border-radius: 11px !important;
}

@media (max-width: 900px) {
  html body .n24-datatable-panel .dt-layout-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  html body .n24-datatable-panel .dt-layout-row:has(.dt-paging) {
    align-items: center !important;
  }
}

@media (max-width: 560px) {
  html body .n24-datatable-panel .dt-search input {
    min-width: 150px;
    width: 160px;
  }
  html body .n24-datatable-panel .dt-layout-row:has(.dt-paging) {
    flex-wrap: wrap !important;
    gap: 8px;
  }
}
/*
 * Modern plain table component.
 *
 * Use .n24-table for regular semantic tables that are not DataTables.
 * Keep this visually related to the modern DataTables skin without applying
 * DataTables-only layout/ordering behaviour.
 */
html body table.n24-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--skin-text);
  background: transparent;
  font-size: 13px;
}

html body table.n24-table > thead > tr > th {
  padding: 8px 10px;
  color: var(--skin-muted) !important;
  background: var(--skin-surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--skin-border) !important;
  box-shadow: none !important;
  text-align: left;
  vertical-align: middle;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

html body table.n24-table > thead > tr:first-child > th:first-child {
  border-top-left-radius: 11px;
}

html body table.n24-table > thead > tr:first-child > th:last-child {
  border-top-right-radius: 11px;
}

html body table.n24-table > tbody > tr > td {
  padding: 9px 10px;
  color: var(--skin-text) !important;
  background: var(--skin-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--skin-border) !important;
  box-shadow: none !important;
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
  line-height: 1.4;
  transition: background-color .14s ease;
}

html body table.n24-table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 11px;
}

html body table.n24-table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 11px;
}

html body table.n24-table > tbody > tr:hover > td {
  background: var(--skin-hover) !important;
}
/* Modern jQuery UI tabs: premium SaaS section navigation. */
html body .ui-tabs,
html body #tabs.ui-tabs,
html body .my-account-tabs,
html body .admin-users-tabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .ui-tabs > .ui-tabs-nav,
html body #tabs > .ui-tabs-nav,
html body .my-account-tabs > .ui-tabs-nav,
html body .admin-users-tabs > .ui-tabs-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 26px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 22px !important;
  padding: 0 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--skin-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  scrollbar-width: none;
}
html body .ui-tabs > .ui-tabs-nav::-webkit-scrollbar {
  display: none;
}
html body .ui-tabs > .ui-tabs-nav > li,
html body #tabs > .ui-tabs-nav > li,
html body .my-account-tabs > .ui-tabs-nav > li,
html body .admin-users-tabs > .ui-tabs-nav > li {
  position: relative !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .ui-tabs > .ui-tabs-nav > li > .ui-tabs-anchor,
html body #tabs > .ui-tabs-nav > li > .ui-tabs-anchor,
html body .my-account-tabs > .ui-tabs-nav > li > .ui-tabs-anchor,
html body .admin-users-tabs > .ui-tabs-nav > li > .ui-tabs-anchor {
  display: block !important;
  float: none !important;
  position: relative !important;
  padding: 14px 1px 13px !important;
  color: var(--skin-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .005em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  outline: 0 !important;
  transition: color .16s ease !important;
}
html body .ui-tabs > .ui-tabs-nav > li > .ui-tabs-anchor:hover {
  color: var(--skin-text) !important;
}
html body .ui-tabs > .ui-tabs-nav > li.ui-tabs-active > .ui-tabs-anchor,
html body .ui-tabs > .ui-tabs-nav > li.ui-state-active > .ui-tabs-anchor,
html body .ui-tabs > .ui-tabs-nav > li[aria-current="page"] > .ui-tabs-anchor {
  color: var(--skin-title) !important;
  font-weight: 700 !important;
}
html body .ui-tabs > .ui-tabs-nav > li.ui-tabs-active::after,
html body .ui-tabs > .ui-tabs-nav > li.ui-state-active::after,
html body .ui-tabs > .ui-tabs-nav > li[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--skin-accent);
}
html body .ui-tabs .ui-tabs-panel {
  border: 0 !important;
}

@media screen and (max-width: 970px) {
  html body .ui-tabs > .ui-tabs-nav,
  html body #tabs > .ui-tabs-nav {
    gap: 20px !important;
  }
}
/*
 * Modern form controls.
 *
 * Shared input/search/select appearance belongs here. Page CSS may keep
 * dimensions and layout, but border, colors and focus behaviour stay
 * consistent across the modern skin.
 */
html body .search,
html body .n24-control,
html body .dt-container .dt-search input,
html body .dt-container .dt-length select,
html body .dt-container input.dt-input,
html body .dt-container select.dt-input {
  color: var(--skin-control-text) !important;
  background: var(--skin-control-bg) !important;
  border: 1px solid var(--skin-control-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

html body .search:focus,
html body .n24-control:focus,
html body .dt-container .dt-search input:focus,
html body .dt-container .dt-length select:focus,
html body .dt-container input.dt-input:focus,
html body .dt-container select.dt-input:focus {
  color: var(--skin-control-text) !important;
  background: var(--skin-control-bg) !important;
  border-color: var(--skin-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 12%, transparent) !important;
  outline: none !important;
}

/* Generic submit appearance is a low-specificity skin default. The standard
 * n24-button class uses the same appearance for both buttons and link-buttons. */
:where(button[type="submit"]),
html body .n24-button {
  color: var(--skin-menu-text);
  background-color: var(--skin-menu-border);
  border: 1px solid var(--skin-menu-hover-text);
}

:where(button[type="submit"]:hover),
html body .n24-button:hover,
html body .n24-button:focus,
html body .n24-button:active,
html body .n24-button.ui-state-hover,
html body .n24-button.ui-state-focus,
html body .n24-button.ui-state-active {
  color: var(--skin-menu-hover-text);
  background: var(--skin-menu-hover);
}

/* Button shape is skin appearance, not a page concern. Size, color and page
 * layout may still be specialized locally. */
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body button:hover,
html body button:focus,
html body button:active,
html body button.ui-state-hover,
html body button.ui-state-focus,
html body button.ui-state-active,
html body input[type="button"]:hover,
html body input[type="button"]:focus,
html body input[type="button"]:active,
html body input[type="submit"]:hover,
html body input[type="submit"]:focus,
html body input[type="submit"]:active,
html body input[type="reset"]:hover,
html body input[type="reset"]:focus,
html body input[type="reset"]:active {
  border-radius: 11px !important;
  font-family: inherit;
}

/* Shared standard action-button geometry. Page CSS may choose not to opt in
 * when a compact/icon/special-purpose button needs different dimensions. */
html body .n24-button,
html body .n24-button.ui-button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 35px !important;
  min-height: 35px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  cursor: pointer;
}

html body .n24-button:hover,
html body .n24-button:focus,
html body .n24-button:active,
html body .n24-button.ui-state-hover,
html body .n24-button.ui-state-focus,
html body .n24-button.ui-state-active {
  border-radius: 11px !important;
}
/*
 * Modern dialogs and popups.
 *
 * Shared popup shell appearance lives here. Keep this component independent
 * from page-specific form/content layout.
 */
html body .popupWindow-wrapper {
  display: block;
  height: auto;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #3a4261;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10, 12, 25, 0.22);
}

html body .popupWindow-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  color: #f7f8ff;
  font-size: 21px;
  font-weight: 500;
  text-align: center;
  padding: 10px 10px;
  background: #303452;
  background: -moz-linear-gradient(top,#41476d 0%, #383d60 60%, #303452 100%);
  background: -webkit-linear-gradient(top,#41476d 0%, #383d60 60%, #303452 100%);
  background: linear-gradient(to bottom, #41476d 0%, #383d60 60%, #303452 100%);
  border-bottom: 3px solid #59628d;
}

html body .pupupWindow-body {
  max-width: 100%;
  border: 1px solid #f7f8ff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: #23273b;
  padding: 30px 30px 60px;
  white-space: nowrap;
  text-align: center;
}

/*
 * jQuery UI dialogs used by dashboard/admin actions.
 *
 * #start-node owns the user Start Node flow while #dialog-confirm is reused by
 * warningMessage(), confirmation dialogs and Node Info. Styling both here keeps
 * the modern skin consistent without changing the underlying page JavaScript.
 */
html body .ui-dialog[aria-describedby="start-node"],
html body .ui-dialog[aria-describedby="dialog-confirm"] {
  box-sizing: border-box;
  max-width: calc(100vw - 32px) !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--skin-text);
  background: var(--skin-surface);
  border: 1px solid var(--skin-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--skin-title) 16%, transparent) !important;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar {
  margin: 0;
  padding: 15px 18px;
  color: var(--skin-title);
  background: var(--skin-surface);
  border: 0;
  border-bottom: 1px solid var(--skin-border);
  border-radius: 0 !important;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-title,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar-close,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar-close {
  width: 30px;
  height: 30px;
  top: 50%;
  right: 12px;
  margin: 0;
  overflow: hidden;
  transform: translateY(-50%);
  color: var(--skin-muted);
  background: var(--skin-page);
  border: 1px solid var(--skin-border);
  border-radius: 9px;
  box-shadow: none;
  font-size: 0 !important;
  text-indent: 0 !important;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar-close .ui-icon,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar-close::before,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar-close::before {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar-close:hover,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar-close:hover {
  color: var(--skin-title);
  background: var(--skin-hover);
  border-color: color-mix(in srgb, var(--skin-accent) 35%, var(--skin-border));
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-titlebar-close:focus-visible,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-titlebar-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 14%, transparent);
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-content,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-content {
  color: var(--skin-text);
  background: var(--skin-surface);
  border: 0;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-content {
  padding: 0 !important;
}

html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-content {
  padding: 22px 24px !important;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane {
  margin: 0;
  padding: 12px 16px;
  background: var(--skin-surface);
  border: 0;
  border-top: 1px solid var(--skin-border);
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonset,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonset {
  display: flex;
  gap: 8px;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button {
  min-height: 36px;
  margin: 0;
  padding: 0 15px;
  color: var(--skin-text);
  background: var(--skin-page);
  border: 1px solid var(--skin-border);
  border-radius: 11px !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button:first-child,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button:first-child {
  color: var(--skin-menu-hover-text);
  background: var(--skin-accent);
  border-color: var(--skin-accent);
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button:hover,
html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button:focus,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button:hover,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button:focus {
  color: var(--skin-title);
  background: var(--skin-hover);
  border-color: color-mix(in srgb, var(--skin-accent) 45%, var(--skin-border));
  outline: 0;
}

html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button:first-child:hover,
html body .ui-dialog[aria-describedby="start-node"] .ui-dialog-buttonpane button:first-child:focus,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button:first-child:hover,
html body .ui-dialog[aria-describedby="dialog-confirm"] .ui-dialog-buttonpane button:first-child:focus {
  color: var(--skin-menu-hover-text);
  background: color-mix(in srgb, var(--skin-accent) 88%, var(--skin-title));
  border-color: color-mix(in srgb, var(--skin-accent) 88%, var(--skin-title));
}

/* Start Node content card. */
html body #start-node .start-node-instructions {
  padding: 22px 24px 20px !important;
  color: var(--skin-text);
}

html body #start-node .start-node-heading {
  margin: 2px 0 24px;
}

html body #start-node .start-node-heading h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--skin-title);
  font-size: 17px;
  font-weight: 700;
}

html body #start-node .start-node-instructions ol {
  margin-bottom: 28px;
}

html body #start-node .start-node-command-label {
  display: block;
  margin-bottom: 7px;
  color: var(--skin-muted);
  font-size: 13px;
  font-weight: 650;
}

html body #start-node .start-node-command {
  margin: 0 0 18px !important;
}

html body #start-node .start-node-command-value {
  min-height: 50px;
  padding: 10px 12px;
  color: var(--skin-control-text);
  background: var(--skin-control-bg);
  border: 1px solid var(--skin-control-border);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--skin-title) 4%, transparent);
}

html body #start-node .start-node-command-text code {
  color: var(--skin-control-text);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 13px;
}

html body #start-node .start-node-command-copy {
  top: 0;
}

html body #start-node .start-node-copy {
  width: 34px;
  height: 34px;
  margin-left: 10px;
  justify-content: center;
  flex: 0 0 34px;
  color: var(--skin-accent);
  background: var(--skin-page);
  border: 1px solid var(--skin-border);
  border-radius: 9px;
  transition: background-color .14s ease, border-color .14s ease;
}

html body #start-node .start-node-copy:hover,
html body #start-node .start-node-copy:focus {
  background: var(--skin-hover);
  border-color: color-mix(in srgb, var(--skin-accent) 40%, var(--skin-border));
  outline: 0;
}

html body #start-node .start-node-copy svg.copytext {
  fill: var(--skin-accent) !important;
}

html body #start-node .start-node-expires {
  color: var(--skin-muted);
}

html body #start-node .start-node-generating {
  padding: 28px 24px;
  color: var(--skin-muted);
}
/*
 * Modern Deploy Node appearance.
 *
 * The shared deploy stylesheet owns geometry. This component owns the Nova
 * dialog shell, tabs and control surfaces.
 */
html body .ui-dialog[aria-describedby="deploy-node"]{
    padding: 0 !important;
    overflow: hidden;
    color: var(--skin-text);
    background: var(--skin-surface);
    border: 1px solid var(--skin-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px color-mix(in srgb, #111827 22%, transparent) !important;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-titlebar{
    margin: 0;
    padding: 15px 18px;
    color: var(--skin-title);
    background: var(--skin-surface);
    border: 0;
    border-bottom: 1px solid var(--skin-border);
    border-radius: 0 !important;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-title{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-titlebar-close{
    width: 30px;
    height: 30px;
    top: 50%;
    right: 12px;
    margin: 0;
    transform: translateY(-50%);
    color: var(--skin-muted);
    background: var(--skin-page);
    border: 1px solid var(--skin-border);
    border-radius: 9px;
    box-shadow: none;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-content{
    color: var(--skin-text);
    background: var(--skin-surface);
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane{
    margin: 0;
    padding: 12px 16px;
    background: var(--skin-surface);
    border: 0;
    border-top: 1px solid var(--skin-border);
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonset{
    display: flex;
    gap: 8px;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button{
    min-height: 36px;
    margin: 0;
    padding: 0 15px;
    color: var(--skin-text);
    background: var(--skin-page);
    border: 1px solid var(--skin-border);
    border-radius: 11px !important;
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button:first-child{
    color: #fff;
    background: var(--skin-accent);
    border-color: var(--skin-accent);
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button:hover,
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button:focus{
    color: var(--skin-title);
    background: var(--skin-hover);
    border-color: color-mix(in srgb, var(--skin-accent) 45%, var(--skin-border));
}
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button:first-child:hover,
html body .ui-dialog[aria-describedby="deploy-node"] .ui-dialog-buttonpane button:first-child:focus{
    color: #fff;
    background: color-mix(in srgb, var(--skin-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--skin-accent) 88%, #000);
}

#deploy-node{
    color: var(--skin-text);
    background: var(--skin-surface);
    scrollbar-color: var(--skin-border) var(--skin-page);
}
#deploy-node .deployCoinIcon{
    display: none !important;
}
#deploy-node::-webkit-scrollbar-track{
    background: var(--skin-page);
}
#deploy-node::-webkit-scrollbar-thumb{
    background: var(--skin-border);
    border-radius: 8px;
}
#deploy-node::-webkit-scrollbar-thumb:hover{
    background: color-mix(in srgb, var(--skin-accent) 38%, var(--skin-border));
}

#deploy-node #tabs{
    color: var(--skin-text);
    background: transparent;
}

/* Nova Deploy navigation: a prominent segmented control, intentionally
 * separate from the legacy menu/jQuery UI visual language used by Classic. */
html body #deploy-node #tabs > .ui-tabs-nav{
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: calc(100% - 318px) !important;
    min-height: 52px !important;
    margin: 0 0 20px !important;
    padding: 6px !important;
    box-sizing: border-box;
    overflow: visible !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--skin-page) 72%, var(--skin-surface)),
        color-mix(in srgb, var(--skin-page) 88%, var(--skin-surface))
    ) !important;
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--skin-page) 72%, var(--skin-surface)),
        color-mix(in srgb, var(--skin-page) 88%, var(--skin-surface))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--skin-accent) 10%, var(--skin-border)) !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 18px color-mix(in srgb, #111827 5%, transparent) !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li,
html body #deploy-node #tabs > .ui-tabs-nav > li:hover,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-hover,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-focus,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-tabs-active,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-active{
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li::after,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-tabs-active::after,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-active::after{
    content: none !important;
    display: none !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li > .ui-tabs-anchor,
html body #deploy-node #tabs > .ui-tabs-nav > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    min-height: 40px !important;
    padding: 0 17px !important;
    color: var(--skin-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: .005em;
    text-decoration: none !important;
    white-space: nowrap !important;
    outline: 0 !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li > .ui-tabs-anchor:hover,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-hover > .ui-tabs-anchor,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-focus > .ui-tabs-anchor{
    color: var(--skin-title) !important;
    background: color-mix(in srgb, var(--skin-accent) 9%, var(--skin-surface)) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--skin-accent) 18%, var(--skin-border)) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, #111827 5%, transparent) !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-tabs-active > .ui-tabs-anchor,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-active > .ui-tabs-anchor{
    color: var(--skin-title) !important;
    background: color-mix(in srgb, var(--skin-accent) 4%, var(--skin-surface)) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--skin-accent) 32%, var(--skin-border)) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #111827 11%, transparent) !important;
    font-weight: 720 !important;
}
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-tabs-active > .ui-tabs-anchor::before,
html body #deploy-node #tabs > .ui-tabs-nav > li.ui-state-active > .ui-tabs-anchor::before{
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 9px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--skin-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--skin-accent) 13%, transparent);
}
#deploy-node #tabs > .ui-tabs-panel{
    color: var(--skin-text);
    background: transparent;
    border: 0;
    padding-top: 4px !important;
}
#deploy-node #tabs h4{
    color: var(--skin-title);
}
#deploy-node #tabs .nav-links a{
    color: var(--skin-accent);
    background: color-mix(in srgb, var(--skin-accent) 8%, transparent);
    border-radius: 6px;
}
#deploy-node #tabs .nav-links a:hover{
    color: var(--skin-accent);
    background: color-mix(in srgb, var(--skin-accent) 14%, transparent);
}

#deploy-node #allNodes.dataTable{
    border-left: 1px solid var(--skin-border) !important;
}
#deploy-node #tabs .allNodes .dt-input{
    color: var(--skin-control-text) !important;
    background: var(--skin-control-bg) !important;
    border-color: var(--skin-control-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
#deploy-node #tabs .allNodes .dt-input:hover{
    border-color: color-mix(in srgb, var(--skin-accent) 30%, var(--skin-control-border)) !important;
}
#deploy-node #tabs .allNodes .dt-input:focus{
    border-color: var(--skin-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 10%, transparent) !important;
}

/* Bulk Deploy appearance. */
#deploy-node .bulkDash .box{
    border-color: var(--skin-border);
    border-radius: 12px;
    background: var(--skin-surface);
    box-shadow: 0 8px 22px color-mix(in srgb, #111827 7%, transparent);
}
#deploy-node .bulkDash input[type="text"],
#deploy-node .bulkDash input[type="number"]{
    color: var(--skin-control-text);
    background: var(--skin-control-bg);
    border: 1px solid var(--skin-control-border);
    border-radius: 11px;
    outline: none;
    font-size: 16px;
}
#deploy-node .bulkDash input[type="text"]:focus,
#deploy-node .bulkDash input[type="number"]:focus{
    border-color: var(--skin-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 12%, transparent);
}
#deploy-node .bulkDash button{
    color: var(--skin-text);
    background: var(--skin-page);
    border: 1px solid var(--skin-border);
    border-radius: 11px;
    font-size: 16px;
    box-shadow: none;
}
#deploy-node .bulkDash button:hover,
#deploy-node .bulkDash button:focus{
    color: var(--skin-title);
    background: var(--skin-hover);
    border-color: color-mix(in srgb, var(--skin-accent) 45%, var(--skin-border));
}
#deploy-node .bulkDash button:disabled{
    opacity: .5;
}
#deploy-node .bulkDash .codeBox{
    color: var(--skin-text);
    background: var(--skin-page);
    border: 1px solid var(--skin-border);
    border-radius: 10px;
    scrollbar-color: var(--skin-border) var(--skin-page);
}
#deploy-node .bulkDash .codeBox::-webkit-scrollbar-track{
    background: var(--skin-page);
}
#deploy-node .bulkDash .codeBox::-webkit-scrollbar-thumb{
    background: var(--skin-border);
    border-radius: 8px;
}
#deploy-node .bulkDash .codeBox::-webkit-scrollbar-thumb:hover{
    background: color-mix(in srgb, var(--skin-accent) 38%, var(--skin-border));
}
#deploy-node .bulkDash .rangeSummary{
    color: var(--skin-text);
    background: var(--skin-page);
    border: 1px solid var(--skin-border);
    border-radius: 10px;
}

@media screen and (max-width: 970px) {
    html body #deploy-node #tabs > .ui-tabs-nav{
        width: 100% !important;
        gap: 4px !important;
        min-height: 46px !important;
        padding: 4px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }
    html body #deploy-node #tabs > .ui-tabs-nav::-webkit-scrollbar{
        display: none;
    }
    html body #deploy-node #tabs > .ui-tabs-nav > li > .ui-tabs-anchor,
    html body #deploy-node #tabs > .ui-tabs-nav > li > a{
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }
}
/*
 * Modern cards and panels.
 *
 * Shared surface appearance lives here. Page CSS keeps component layout,
 * spacing and content-specific typography.
 */
html body .n24-card,
html body .n24-panel {
  color: var(--skin-text);
  background: var(--skin-surface);
  border: 1px solid var(--skin-border);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(10, 12, 25, 0.20);
}

/* Quieter page-toned cards/panels used by already-refactored account/admin
 * screens. Keeping this variant here means the page owns layout only. */
html body .n24-card.n24-surface--page,
html body .n24-panel.n24-surface--page {
  color: var(--skin-text);
  background: var(--skin-page);
  border: 1px solid var(--skin-border);
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(10, 12, 25, 0.22);
}
/*
 * Modern navigation skin.
 *
 * Visual appearance and geometry live together here so modern.css.php only
 * composes shared skin components.
 */

/* --------------------------------------------------------------------------
 * Main navigation visual skin
 * Scope this to the site navbar: DataTables also renders a <nav> for paging.
 * -------------------------------------------------------------------------- */
html body .flex-wrapper > nav {
  background: var(--skin-menu) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--skin-menu-border) 55%, transparent) !important;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--skin-menu) 14%, transparent) !important;
}
html body .flex-wrapper > nav .wrapper {
  height: 64px !important;
  line-height: normal !important;
  padding: 0 24px !important;
}
html body .wrapper .logo {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
}
html body .wrapper .logo a {
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
html body .wrapper .logo svg {
  transform: none !important;
  display: block !important;
}
html body .wrapper .nav-links {
  align-items: center !important;
  gap: 3px !important;
}
html body .nav-links li {
  position: relative;
}
html body .flex-wrapper > nav button[type=submit],
html body .nav-links li > a,
html body .nav-links .desktop-item {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  transition: color .15s ease, background-color .15s ease !important;
}
html body .nav-links li > a:hover,
html body .nav-links li:hover > a.desktop-item,
html body #user-meni:hover {
  color: var(--skin-menu-text) !important;
  background: color-mix(in srgb, var(--skin-menu-hover) 28%, transparent) !important;
}
html body .navlineRight {
  padding-right: 0 !important;
}
html body .navlineRightUserData {
  margin-top: 0 !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body #loginLink svg {
  margin-top: 0 !important;
}

html body .nav-links .drop-menu,
html body .login {
  top: 72px !important;
  width: 220px !important;
  padding: 8px !important;
  line-height: normal !important;
  background: var(--skin-menu-dropdown) !important;
  border: 1px solid color-mix(in srgb, var(--skin-menu-border) 72%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 38px rgba(10, 12, 25, 0.34) !important;
}
html body .nav-links li:hover .drop-menu {
  top: 66px !important;
}
html body .drop-menu li a,
html body #user-meni > a,
html body #user-meni form a {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.3 !important;
}
html body #user-meni form a.theme-option {
    padding-left: 30px !important;
}

html body .mega-box {
  top: 72px !important;
  min-width: min(900px, calc(100vw - 40px)) !important;
  padding: 0 !important;
}
html body .nav-links li:hover .mega-box {
  top: 66px !important;
}
html body .mega-box .content {
  gap: 20px !important;
  padding: 20px !important;
  background: var(--skin-menu-mega) !important;
  border: 1px solid color-mix(in srgb, var(--skin-menu-border) 72%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 38px rgba(10, 12, 25, 0.34) !important;
}
html body .mega-box .content .row {
  width: auto !important;
  flex: 1 1 0 !important;
  line-height: normal !important;
}
html body .mega-box .content .row:first-child {
  flex: 0 0 105px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
html body .mega-box .content .row:first-child img {
  width: 72px !important;
  height: 72px !important;
  opacity: .92 !important;
  border-radius: 14px !important;
}
html body .content .row header {
  margin: 2px 8px 9px !important;
  color: color-mix(in srgb, var(--skin-menu-text) 66%, transparent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body .content .row .mega-links {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html body .row .mega-links li {
  padding: 0 !important;
}
html body .row .mega-links li a {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--skin-menu-text) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.3 !important;
}
html body .row .mega-links li a:hover {
  color: var(--skin-menu-text) !important;
  background: color-mix(in srgb, var(--skin-menu-hover) 24%, transparent) !important;
}

@media screen and (max-width: 970px) {
  html body .flex-wrapper > nav .wrapper {
    height: 64px !important;
    padding: 0 16px !important;
  }
  html body .wrapper .nav-links {
    top: 0 !important;
    gap: 0 !important;
    padding: 58px 14px 30px !important;
    background: var(--skin-menu-mega) !important;
  }
  html body .nav-links li {
    margin: 5px 0 !important;
  }
  html body .nav-links li a,
  html body .nav-links .mobile-item {
    padding: 11px 13px !important;
    border-radius: 9px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  html body .nav-links .drop-menu,
  html body .mega-box {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body .mega-box .content {
    gap: 8px !important;
    padding: 8px 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body .mega-box .content .row:first-child {
    display: none !important;
  }
  html body .content .row header {
    margin-top: 12px !important;
  }
}

/* --------------------------------------------------------------------------
 * Modern navigation geometry
 * -------------------------------------------------------------------------- */
:root {
  --skin-nav-height: 64px;
  --skin-nav-item-height: 36px;
  --skin-nav-inline-padding: 24px;
  --skin-nav-panel-gap: 4px;
  --skin-nav-account-inset: 48px;
  --skin-nav-user-dropdown-shift: 64px;
  --skin-nav-user-dropdown-width: 220px;
}

html body .flex-wrapper > nav,
html body .flex-wrapper > nav .wrapper {
  min-height: var(--skin-nav-height) !important;
}

/* Desktop uses three independent columns so the main navigation is truly
 * centered on the viewport, regardless of logo/account-cluster width. */
html body .flex-wrapper > nav .wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  height: var(--skin-nav-height) !important;
  line-height: normal !important;
  padding: 0 var(--skin-nav-inline-padding) !important;
}

/* Left logo. */
html body .flex-wrapper > nav .wrapper > .logo {
  display: flex !important;
  align-items: center !important;
  justify-self: start !important;
  flex: 0 0 auto !important;
  height: var(--skin-nav-height) !important;
  min-width: 0 !important;
}
html body .flex-wrapper > nav .wrapper > .logo a,
html body .flex-wrapper > nav .wrapper > .logo svg {
  display: flex !important;
  align-items: center !important;
}
html body .flex-wrapper > nav .wrapper > .logo svg {
  margin: 0 !important;
}

/* Main desktop navigation owns the full navbar height and the center column. */
html body .flex-wrapper > nav .wrapper > .nav-links {
  display: flex !important;
  align-items: stretch !important;
  justify-self: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  height: var(--skin-nav-height) !important;
}
html body .flex-wrapper > nav .wrapper > .nav-links > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: var(--skin-nav-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .flex-wrapper > nav .wrapper > .nav-links > li > a,
html body .flex-wrapper > nav .wrapper > .nav-links > li > .desktop-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--skin-nav-item-height) !important;
  min-height: var(--skin-nav-item-height) !important;
}

/* Floating panels keep a small visual gap while the transparent bridge keeps
 * hover active across it. */
html body .flex-wrapper > nav .wrapper > .nav-links > li > .drop-menu,
html body .flex-wrapper > nav .wrapper > .nav-links > li > .mega-box,
html body .flex-wrapper > nav .wrapper > .nav-links > li:hover > .drop-menu,
html body .flex-wrapper > nav .wrapper > .nav-links > li:hover > .mega-box {
  top: calc(100% + var(--skin-nav-panel-gap)) !important;
}
html body .flex-wrapper > nav .wrapper > .nav-links > li > .drop-menu::before,
html body .flex-wrapper > nav .wrapper > .nav-links > li > .mega-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--skin-nav-panel-gap));
  height: var(--skin-nav-panel-gap);
  background: transparent;
}

/* Right-side account cluster. The legacy markup is a table; Modern explicitly
 * removes table layout semantics so balance, user icon and nickname all share
 * the exact same 64px flex alignment. Classic keeps the original table rules. */
html body .flex-wrapper > nav .wrapper > .logo1 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: var(--skin-nav-height) !important;
  margin-left: 0 !important;
  margin-right: var(--skin-nav-account-inset) !important;
}
html body .navlineRight {
  display: block !important;
  width: auto !important;
  height: var(--skin-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: collapse !important;
}
html body .navlineRight > tbody {
  display: block !important;
  width: auto !important;
  height: var(--skin-nav-height) !important;
}
html body .navlineRight > tbody > tr {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  height: var(--skin-nav-height) !important;
  gap: 8px !important;
}
html body .navlineRight > tbody > tr > td {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: var(--skin-nav-height) !important;
  min-height: var(--skin-nav-height) !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}
html body .navlineRightUserData,
html body #balance,
html body #showNickName {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--skin-nav-height) !important;
  min-height: var(--skin-nav-height) !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}
html body #balance > a,
html body #showNickName {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--skin-nav-height) !important;
  min-height: var(--skin-nav-height) !important;
  line-height: 1 !important;
}

/* Usernames are capped at 20 characters by the application. Keep the full
 * desktop nickname on one line and let the account cluster grow naturally. */
html body #showNickName {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* User icon and its dropdown use the same navbar height as the main menu.
 * Reset legacy .nav-links mobile positioning because #user-login is an
 * account control, not the mobile main-navigation drawer. */
html body #user-login {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  height: var(--skin-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  top: auto !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: normal !important;
}
html body #user-login > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: var(--skin-nav-height) !important;
  min-height: var(--skin-nav-height) !important;
  margin: 0 !important;
}
html body #loginLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 7px !important;
  line-height: 1 !important;
}
html body #loginLink svg {
  display: block !important;
  margin: 0 !important;
}

/* Logged-out markup still contains an empty account drop-menu before the
 * separate fast-login panel. Never render that empty shell on hover. */
html body #user-login > li > .drop-menu:not(:has(> li)) {
  display: none !important;
}

/* The user dropdown is scrollable, so a pseudo-element attached to the panel
 * itself would be clipped by overflow-y:auto. Put the bridge on the parent li
 * instead and align it to the exact shifted dropdown footprint. */
html body #user-login > li::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: calc(100% + var(--skin-nav-user-dropdown-shift) - var(--skin-nav-user-dropdown-width));
  right: calc(-1 * var(--skin-nav-user-dropdown-shift));
  height: var(--skin-nav-panel-gap);
  background: transparent;
  pointer-events: auto;
}
html body #user-login > li > .drop-menu,
html body #user-login > li:hover > .drop-menu {
  position: absolute !important;
  top: calc(100% + var(--skin-nav-panel-gap)) !important;
  right: calc(-1 * var(--skin-nav-user-dropdown-shift)) !important;
  left: auto !important;
  width: var(--skin-nav-user-dropdown-width) !important;
  min-width: var(--skin-nav-user-dropdown-width) !important;
}

/* Fast-login internal layout is shared across skins. Modern owns only the
 * panel position below its 64px navigation bar. */
html body .login {
  top: calc(var(--skin-nav-height) + var(--skin-nav-panel-gap)) !important;
}

@media screen and (max-width: 1450px) and (min-width: 971px) {
  :root {
    --skin-nav-inline-padding: 16px;
    --skin-nav-account-inset: 28px;
  }
  html body .flex-wrapper > nav .wrapper > .nav-links {
    gap: 0 !important;
  }
  html body .flex-wrapper > nav .wrapper > .nav-links > li > a,
  html body .flex-wrapper > nav .wrapper > .nav-links > li > .desktop-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
  }
}

/* On narrower desktop widths, hiding only the nickname protects the centered
 * main navigation. The balance and user menu remain available. */
@media screen and (max-width: 1180px) and (min-width: 971px) {
  html body #showNickName {
    display: none !important;
  }
}

@media screen and (max-width: 970px) {
  :root {
    --skin-nav-inline-padding: 16px;
    --skin-nav-account-inset: 0px;
  }

  html body .flex-wrapper > nav .wrapper {
    display: flex !important;
  }
  html body .flex-wrapper > nav .wrapper > .nav-links {
    height: 100vh !important;
    align-items: initial !important;
  }
  html body .flex-wrapper > nav .wrapper > .nav-links > li {
    display: block !important;
    height: auto !important;
  }
  html body .flex-wrapper > nav .wrapper > .nav-links > li > .drop-menu::before,
  html body .flex-wrapper > nav .wrapper > .nav-links > li > .mega-box::before,
  html body #user-login > li::after {
    display: none !important;
  }
  html body .flex-wrapper > nav .wrapper > .logo1 {
    margin-right: 0 !important;
  }
  html body #showNickName {
    display: none !important;
  }

  /* Keep the account icon cluster vertically centered even though the main
   * navigation itself switches to the mobile drawer layout. */
  html body #user-login,
  html body #user-login > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--skin-nav-height) !important;
    min-height: var(--skin-nav-height) !important;
  }
  html body #user-login > li > .drop-menu {
    position: absolute !important;
  }
}
/*
 * Shared top-level page geometry.
 *
 * The main navigation is fixed, so the site reserves one standard content
 * offset here instead of making every page maintain its own margin/padding.
 * New pages therefore inherit the correct navbar clearance automatically.
 *
 * Component-specific visual positioning (for example top-level tabs) belongs
 * to that component's shared layout, not to the page-shell offset.
 */
html body .flex-wrapper::before {
  content: "";
  display: block;
  flex: 0 0 103px;
  width: 100%;
  pointer-events: none;
}

/* Coin profile uses the standard navbar offset above, but keeps a centered
 * content shell instead of stretching as a flex item across the viewport. */
html body .flex-wrapper > main.coin-profile {
  flex: 0 0 auto !important;
  width: min(1120px, calc(100% - 40px)) !important;
  max-width: 1120px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 50px !important;
}

/* Keep the price-provider attribution on one visual baseline. The provider
 * span already uses the same markup as Dashboard; the coin profile only needs
 * the row alignment because Dashboard's page-only stylesheet is not loaded here. */
html body .coin-profile .coin-profile-source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

html body .coin-profile .coin-profile-source .dashboard-price-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

html body .coin-profile .coin-profile-source .dashboard-price-source img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Documentation is a dedicated application shell with its own top-level
 * spacing/sticky sidebar geometry. Keep that one special shell outside the
 * standard page spacer without pushing page-specific rules into its large CSS. */
html body:has(#nodes24-documentation) .flex-wrapper::before {
  display: none;
}

@media (max-width: 620px) {
  html body .flex-wrapper::before {
    flex-basis: 85px;
  }

  html body .flex-wrapper > main.coin-profile {
    width: min(1120px, calc(100% - 20px)) !important;
  }
}
/*
 * Shared top-level tab-page geometry.
 *
 * Every normal page uses the same navbar clearance from page-layout.css.php.
 * A page whose first visual component is section navigation/tabs can sit a bit
 * closer to the navbar, so the tab component lifts the whole page structure
 * without introducing a second page-shell offset.
 *
 * Nested tabs (for example inside Deploy Node dialogs) are intentionally not
 * matched by these direct-child selectors.
 */
html body .flex-wrapper > #tabs,
html body .flex-wrapper > .admin-users-page,
html body .flex-wrapper > .my-account-page {
  margin-top: -36px !important;
}

/* Old page-specific jQuery UI positioning must not add another navbar offset. */
html body .flex-wrapper > #tabs {
  top: 0 !important;
}

html body .flex-wrapper > .admin-users-page,
html body .flex-wrapper > .my-account-page {
  padding-top: 0 !important;
}

@media (max-width: 620px) {
  html body .flex-wrapper > #tabs,
  html body .flex-wrapper > .admin-users-page,
  html body .flex-wrapper > .my-account-page {
    margin-top: -18px !important;
  }
}
/*
 * Shared form-control geometry.
 *
 * Skins own colors, borders and focus states. This file keeps only dimensions
 * that should remain identical across skin families.
 */
html body .search {
  box-sizing: border-box;
  height: 35px;
  padding-left: 10px;
  font-size: 16px;
}

html body .search::placeholder {
  opacity: .5;
}

/* Standard action buttons may be real buttons or links styled as buttons.
 * Link states must never reintroduce normal anchor decoration. */
html body .n24-button,
html body .n24-button:link,
html body .n24-button:visited,
html body .n24-button:hover,
html body .n24-button:focus,
html body .n24-button:active {
  text-decoration: none !important;
}

/* Generic submit geometry is a low-specificity default so page-specific
 * buttons can still own special layout. */
:where(button[type="submit"]) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  cursor: pointer;
  margin: auto;
  transition: all .3s ease;
}

@media screen and (max-width: 1400px) {
  :where(button[type="submit"]) {
    font-size: 17px;
    font-weight: 400;
    padding: 5px 8px;
  }
}
/*
 * Shared fast-login layout.
 *
 * Skins own panel placement and appearance. This component owns only the
 * internal structure so Classic and Modern use the same stable form layout.
 */
html body .login {
  box-sizing: border-box !important;
  height: 220px !important;
  padding: 16px 10px 12px !important;
}

html body .login > h5 {
  display: block !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}

html body .login .loginForm {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .login .loginInput1,
html body .login .loginInput2 {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 35px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
}

html body .login #loginButton {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 90px !important;
  height: 35px !important;
  min-height: 35px !important;
  margin: 2px auto 0 !important;
  line-height: 1 !important;
}

html body .login > h6 {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 12px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}