:root {
  /* Brand palette */
  --ny-primary: #5b3df0;
  --ny-primary-rgb: 91, 61, 240;
  --ny-primary-2: #8b5cf6; /* gradient end */
  --ny-accent: #22d3ee; /* mint/cyan accent */
  --ny-accent-rgb: 34, 211, 238;
  --ny-pink: #f43f5e;
  --ny-orange: #fb923c;

  --ny-success: #14b8a6;
  --ny-success-rgb: 20, 184, 166;
  --ny-info: #0ea5e9;
  --ny-info-rgb: 14, 165, 233;
  --ny-warning: #f59e0b;
  --ny-warning-rgb: 245, 158, 11;
  --ny-danger: #f43f5e;
  --ny-danger-rgb: 244, 63, 94;

  /* Surfaces - LIGHT */
  --ny-bg: #f4f5fb;
  --ny-bg-pattern: radial-gradient(
    circle at 1px 1px,
    rgba(91, 61, 240, 0.06) 1px,
    transparent 0
  );
  --ny-body: #3a3f5a;
  --ny-heading: #1a1d35;
  --ny-muted: #7a83a3;
  --ny-border: #e6e9f4;
  --ny-border-soft: #eef0f8;
  --ny-card: #ffffff;
  --ny-card-2: #fbfbff; /* nested surface */
  --ny-hover: #f1f3fc;
  --ny-input-bg: #f7f8fd;
  --ny-input-border: #e2e5f2;

  /* Sidebar */
  --ny-sidebar-bg: #15172b;
  --ny-sidebar-bg-2: #1d1f3d;
  --ny-sidebar-color: #b3b8d8;
  --ny-sidebar-active: #ffffff;
  --ny-sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --ny-sidebar-caption: #6b7090;

  /* Topbar */
  --ny-topbar-bg: rgba(255, 255, 255, 0.78);
  --ny-topbar-border: rgba(230, 233, 244, 0.6);

  /* Layout sizes */
  --ny-topbar-h: 76px;
  --ny-sidebar-w: 270px;
  --ny-sidebar-w-mini: 80px;
  --ny-radius: 14px;
  --ny-radius-sm: 10px;
  --ny-radius-lg: 22px;

  /* Shadows */
  --ny-shadow-xs: 0 2px 6px rgba(26, 29, 53, 0.04);
  --ny-shadow-sm: 0 4px 14px rgba(26, 29, 53, 0.06);
  --ny-shadow: 0 10px 30px rgba(26, 29, 53, 0.08);
  --ny-shadow-lg: 0 22px 50px rgba(26, 29, 53, 0.14);
  --ny-glow: 0 0 0 6px rgba(var(--ny-primary-rgb), 0.18);

  /* Gradient bank */
  --ny-grad-primary: linear-gradient(135deg, #5b3df0 0%, #8b5cf6 100%);
  --ny-grad-accent: linear-gradient(135deg, #22d3ee 0%, #5b3df0 100%);
  --ny-grad-warm: linear-gradient(135deg, #fb923c 0%, #f43f5e 100%);
  --ny-grad-cool: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
  --ny-grad-mint: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --ny-grad-rose: linear-gradient(135deg, #f472b6 0%, #f43f5e 100%);
  --ny-grad-amber: linear-gradient(135deg, #fbbf24 0%, #fb923c 100%);
}

/* DARK theme overrides */
[data-bs-theme="dark"] {
  --ny-bg: #0a0c1c;
  --ny-bg-pattern: radial-gradient(
    circle at 1px 1px,
    rgba(139, 92, 246, 0.1) 1px,
    transparent 0
  );
  --ny-body: #c4cae0;
  --ny-heading: #f1f3fc;
  --ny-muted: #7e85a8;
  --ny-border: #1f2241;
  --ny-border-soft: #181a35;
  --ny-card: #14172e;
  --ny-card-2: #181b36;
  --ny-hover: #1c1f3d;
  --ny-input-bg: #181b36;
  --ny-input-border: #262a52;

  --ny-sidebar-bg: #0d0f22;
  --ny-sidebar-bg-2: #14162d;
  --ny-sidebar-color: #a4abce;
  --ny-sidebar-caption: #595f80;

  --ny-topbar-bg: rgba(20, 23, 46, 0.78);
  --ny-topbar-border: rgba(31, 34, 65, 0.6);

  --ny-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.2);
  --ny-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
  --ny-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --ny-shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.55);
}

/* Bootstrap override hooks */
[data-bs-theme] {
  --bs-primary: var(--ny-primary);
  --bs-primary-rgb: var(--ny-primary-rgb);
  --bs-success: var(--ny-success);
  --bs-info: var(--ny-info);
  --bs-warning: var(--ny-warning);
  --bs-danger: var(--ny-danger);
  --bs-body-bg: var(--ny-bg);
  --bs-body-color: var(--ny-body);
  --bs-border-color: var(--ny-border);
  --bs-border-radius: var(--ny-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--ny-radius);
  --bs-link-color: var(--ny-primary);
  --bs-link-hover-color: var(--ny-primary-2);
}

/* ============== Base ============== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ny-body);
  background-color: var(--ny-bg);
  background-image: var(--ny-bg-pattern);
  background-size: 28px 28px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide page vertical scrollbar (keep scrolling functional) */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 700;
  color: var(--ny-heading);
  letter-spacing: -0.02em;
}
a {
  color: var(--ny-primary);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--ny-primary-2);
}
.text-muted {
  color: var(--ny-muted) !important;
}
hr {
  border-color: var(--ny-border);
  opacity: 1;
}
::selection {
  background: rgba(var(--ny-primary-rgb), 0.25);
  color: var(--ny-heading);
}

/* ============== Layout shell ============== */
.app {
  min-height: 100vh;
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ny-topbar-h);
  background: var(--ny-topbar-bg);
  border-bottom: 1px solid var(--ny-topbar-border);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  z-index: 1030;
  display: flex;
  align-items: center;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ny-sidebar-w);
  background: linear-gradient(
    180deg,
    var(--ny-sidebar-bg) 0%,
    var(--ny-sidebar-bg-2) 100%
  );
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 60% at 0% 0%,
      rgba(139, 92, 246, 0.12),
      transparent 60%
    ),
    radial-gradient(
      120% 60% at 100% 100%,
      rgba(34, 211, 238, 0.06),
      transparent 60%
    );
  pointer-events: none;
}
.content {
  margin-left: var(--ny-sidebar-w);
  padding-top: var(--ny-topbar-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page {
  flex: 1;
  padding: 1.75rem;
}
.app-footer {
  border-top: 1px solid var(--ny-border);
  padding: 1rem 1.75rem;
  font-size: 0.8125rem;
  color: var(--ny-muted);
  background: var(--ny-card);
}

/* Sidebar collapsed */
body.sidebar-mini .sidebar {
  width: var(--ny-sidebar-w-mini);
}
body.sidebar-mini .content {
  margin-left: var(--ny-sidebar-w-mini);
}
body.sidebar-mini .brand-text,
body.sidebar-mini .sidebar .menu-text,
body.sidebar-mini .sidebar .menu-arrow,
body.sidebar-mini .sidebar .menu-badge,
body.sidebar-mini .sidebar .menu-caption,
body.sidebar-mini .sidebar .sidebar-promo {
  display: none !important;
}
body.sidebar-mini .menu > li > a {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.sidebar-mini .submenu {
  display: none;
}

/* Mini sidebar flyout — positioned via JS to escape parent overflow */
.submenu.flyout-open {
  display: block !important;
  min-width: 230px !important;
  max-height: none !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
  background: var(--ny-card) !important;
  border: 1px solid var(--ny-border) !important;
  border-radius: var(--ny-radius) !important;
  box-shadow: var(--ny-shadow-lg) !important;
  z-index: 1060 !important;
  overflow: visible !important;
  animation: flyoutIn 0.18s ease;
}
@keyframes flyoutIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* RTL: flyout slides in from the right side */
[dir="rtl"] .submenu.flyout-open {
  animation-name: flyoutInRtl;
}
@keyframes flyoutInRtl {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.submenu.flyout-open li {
  padding: 0;
}
.submenu.flyout-open a {
  padding: 0.55rem 1rem 0.55rem 1rem !important;
  color: var(--ny-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  background: transparent !important;
  display: block !important;
}
.submenu.flyout-open a::before {
  display: none !important;
}
.submenu.flyout-open a:hover {
  background: var(--ny-hover) !important;
  color: var(--ny-primary) !important;
}
.submenu.flyout-open a.active {
  background: rgba(var(--ny-primary-rgb), 0.08) !important;
  color: var(--ny-primary) !important;
  font-weight: 600 !important;
}
.submenu.flyout-open::before {
  /* parent label header */
  content: attr(data-flyout-title);
  display: block;
  padding: 0.55rem 1rem 0.65rem;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ny-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ny-border-soft);
  margin: -0.5rem 0 0.35rem;
}

/* Items WITHOUT a submenu in mini mode — show small dark tooltip on hover */
.menu-tooltip {
  position: fixed;
  background: var(--ny-heading);
  color: var(--ny-card);
  padding: 0.4rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1060;
  box-shadow: var(--ny-shadow);
  pointer-events: none;
  animation: flyoutIn 0.15s ease;
}
body.sidebar-mini .brand {
  justify-content: center;
  padding: 0;
}

/* Horizontal layout */
body.layout-horizontal .sidebar {
  display: none;
}
body.layout-horizontal .content {
  margin-left: 0;
  padding-top: calc(var(--ny-topbar-h) + 54px);
}
body.layout-horizontal .page {
  width: 100%;
  padding: 2rem 2.5rem;
}
/* Hide sidebar toggle in horizontal layout — there's no sidebar to toggle */
body.layout-horizontal [data-toggle="sidebar"] {
  display: none;
}
body.layout-horizontal .app-footer {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  background: transparent;
  border-top: 0;
}
@media (max-width: 767.98px) {
  body.layout-horizontal .page,
  body.layout-horizontal .app-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
body.layout-horizontal .topbar-brandzone {
  width: auto;
  padding-right: 1.5rem;
  border-right: 0;
}
body.layout-horizontal .h-nav {
  position: fixed;
  top: var(--ny-topbar-h);
  left: 0;
  right: 0;
  height: 54px;
  background: var(--ny-card);
  border-bottom: 1px solid var(--ny-border);
  z-index: 1020;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}
body:not(.layout-horizontal) .h-nav {
  display: none !important;
}

.h-nav-dd {
  position: static;
}
.h-nav-item {
  padding: 0.55rem 1rem;
  color: var(--ny-body);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.h-nav-item:hover {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.h-nav-item.active,
.h-nav-item.show {
  background: var(--ny-grad-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--ny-primary-rgb), 0.3);
}
.h-nav-item.active:hover,
.h-nav-item.show:hover {
  color: #fff;
}
.h-nav-item.dropdown-toggle::after {
  margin-left: 0.15rem;
  vertical-align: 0;
  border-top-color: currentColor;
  transition: transform 0.25s ease;
}
.h-nav-item.show::after {
  transform: rotate(180deg);
}

/* Horizontal nav dropdowns: hover-to-open, smooth slide-down, CSS-only (no Popper flash) */
.h-nav .h-nav-dd {
  position: relative;
}
.h-nav .h-nav-dd .dropdown-menu {
  display: block !important; /* always rendered so transitions fire */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  margin-top: 0.55rem !important;
  min-width: 230px;
  padding: 0.5rem;
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius);
  box-shadow: var(--ny-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
  animation: none; /* kill any prior keyframe animation */
}
.h-nav .h-nav-dd:hover > .dropdown-menu,
.h-nav .h-nav-dd:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
}
/* Invisible bridge between trigger and dropdown — keeps hover stable across the gap */
.h-nav .h-nav-dd .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}
/* Trigger button active state while hovered */
.h-nav .h-nav-dd:hover > .h-nav-item,
.h-nav .h-nav-dd:focus-within > .h-nav-item {
  background: var(--ny-grad-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--ny-primary-rgb), 0.3);
}
.h-nav .h-nav-dd:hover > .h-nav-item::after,
.h-nav .h-nav-dd:focus-within > .h-nav-item::after {
  transform: rotate(180deg);
  border-top-color: #fff;
}
/* Last few dropdowns flip to right-aligned to avoid overflow */
.h-nav .h-nav-dd:nth-last-of-type(-n + 2) > .dropdown-menu:not(.h-nav-mega) {
  left: auto !important;
  right: 0 !important;
}
.h-nav .dropdown-item {
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ny-body);
}
.h-nav .dropdown-item:hover,
.h-nav .dropdown-item:focus {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.h-nav .dropdown-item.active,
.h-nav .dropdown-item:active {
  background: var(--ny-grad-primary);
  color: #fff;
}
.h-nav .dropdown-item i {
  font-size: 1.05rem;
  opacity: 0.85;
  width: 20px;
  text-align: center;
}
.h-nav .dropdown-header {
  padding: 0.65rem 0.75rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ny-muted);
}
.h-nav .dropdown-divider {
  margin: 0.35rem 0;
  border-color: var(--ny-border-soft);
}

/* Mega menu (multi-column) variant — centered under trigger */
.h-nav .h-nav-mega {
  min-width: 620px !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 10px) scale(0.98) !important;
  transform-origin: top center !important;
}
.h-nav .h-nav-dd:hover > .h-nav-mega,
.h-nav .h-nav-dd:focus-within > .h-nav-mega {
  transform: translate(-50%, 0) scale(1) !important;
}
.h-nav-mega .mega-col {
  padding: 0.35rem;
}
.h-nav-mega .mega-feature {
  background: linear-gradient(
    135deg,
    rgba(var(--ny-primary-rgb), 0.08),
    rgba(34, 211, 238, 0.06)
  );
  border-radius: 12px;
  padding: 1.1rem;
  height: 100%;
}
.h-nav-mega .mega-feature h6 {
  font-size: 0.9rem;
  margin: 0 0 0.35rem 0;
  color: var(--ny-heading);
}
.h-nav-mega .mega-feature p {
  font-size: 0.76rem;
  color: var(--ny-muted);
  margin: 0 0 0.65rem 0;
}
@media (max-width: 991.98px) {
  .h-nav-mega {
    min-width: 280px !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* ====================================================================
   BOXED LAYOUT — entire template centered as a card on a contrast bg
   ==================================================================== */
body.layout-boxed {
  background: #d8dbe8;
  background-image: var(--ny-bg-pattern);
  background-size: 28px 28px;
}
[data-bs-theme="dark"] body.layout-boxed {
  background: #05071a;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(139, 92, 246, 0.1) 1px,
    transparent 0
  );
}
body.layout-boxed .app {
  max-width: 1480px;
  margin: 0 auto;
  background: var(--ny-bg);
  background-image: var(--ny-bg-pattern);
  background-size: 28px 28px;
  min-height: 100vh;
  position: relative;
  box-shadow:
    0 0 80px rgba(15, 23, 42, 0.18),
    0 16px 40px rgba(15, 23, 42, 0.1);
}

/* Constrain fixed topbar and sidebar to within the boxed area */
@media (min-width: 1481px) {
  body.layout-boxed .topbar {
    left: calc(50vw - 740px) !important;
    right: calc(50vw - 740px) !important;
  }
  body.layout-boxed .sidebar {
    left: calc(50vw - 740px) !important;
  }
}

/* Mobile sidebar drawer still works inside the boxed area */
@media (max-width: 991.98px) {
  body.layout-boxed .sidebar {
    left: 0 !important;
  }
}

/* Mobile sidebar */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .content {
    margin-left: 0 !important;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  body.sidebar-open .backdrop {
    display: block;
  }
  .topbar-brandzone {
    width: auto !important;
  }
}
.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 28, 0.55);
  z-index: 1035;
  backdrop-filter: blur(2px);
}

/* ============== Brand ============== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.topbar .brand {
  color: var(--ny-heading);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ny-grad-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(91, 61, 240, 0.4);
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ny-accent);
}

/* ============== Topbar ============== */
.topbar-brandzone {
  width: var(--ny-sidebar-w);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-mini .topbar-brandzone {
  width: var(--ny-sidebar-w-mini);
  padding: 0;
  justify-content: center;
}
.topbar-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ny-body);
  position: relative;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.icon-btn:active {
  transform: scale(0.94);
}
.icon-btn i {
  font-size: 1.3rem;
}
.icon-btn .badge-dot {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ny-danger);
  box-shadow: 0 0 0 3px var(--ny-card);
  animation: pulse 2s infinite;
}
.icon-btn .badge-num {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ny-grad-warm);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 18px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--ny-card);
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--ny-card);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--ny-card),
      0 0 0 6px rgba(244, 63, 94, 0.4);
  }
}

.topbar-search {
  position: relative;
  max-width: 340px;
  flex: 1;
}
.topbar-search input {
  width: 100%;
  height: 42px;
  padding: 0 1rem 0 2.6rem;
  background: var(--ny-input-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ny-body);
  font-size: 0.85rem;
  transition: all 0.15s;
}
.topbar-search input:focus {
  outline: none;
  border-color: var(--ny-primary);
  background: var(--ny-card);
  box-shadow: var(--ny-glow);
}
.topbar-search > i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ny-muted);
  font-size: 1.1rem;
}
.topbar-search kbd {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  background: var(--ny-border-soft);
  color: var(--ny-muted);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
}
@media (max-width: 767.98px) {
  .topbar-search {
    display: none;
  }
}

.user-menu-btn {
  width: auto;
  padding: 5px 10px 5px 5px;
  gap: 0.55rem;
}
.user-menu-btn .user-info {
  line-height: 1.15;
  text-align: left;
}
.user-menu-btn .user-info small {
  color: var(--ny-muted);
  font-size: 0.7rem;
  font-weight: 500;
}
.user-menu-btn .user-info strong {
  font-size: 0.82rem;
  color: var(--ny-heading);
  display: block;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .user-menu-btn .user-info {
    display: none;
  }
}

/* Avatars */
.avatar,
.avatar-sm,
.avatar-lg,
.avatar-xl,
.avatar-xxl {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}
.avatar {
  width: 38px;
  height: 38px;
}
.avatar-sm {
  width: 30px;
  height: 30px;
}
.avatar-lg {
  width: 56px;
  height: 56px;
}
.avatar-xl {
  width: 96px;
  height: 96px;
}
.avatar-xxl {
  width: 128px;
  height: 128px;
}
.avatar-square {
  border-radius: 10px;
}
.avatar-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}

.avatar-group {
  display: inline-flex;
}
.avatar-group > * {
  margin-left: -10px;
  border: 2.5px solid var(--ny-card);
  transition: transform 0.15s;
}
.avatar-group > *:first-child {
  margin-left: 0;
}
.avatar-group > *:hover {
  transform: translateY(-3px);
  z-index: 2;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-online {
  background: var(--ny-success);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25);
}
.status-busy {
  background: var(--ny-danger);
}
.status-away {
  background: var(--ny-warning);
}
.status-offline {
  background: var(--ny-muted);
}
.has-status {
  position: relative;
}
.has-status .status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid var(--ny-card);
}

/* ============== Dropdowns ============== */
.dropdown-menu {
  border: 1px solid var(--ny-border);
  background: var(--ny-card);
  color: var(--ny-body);
  border-radius: var(--ny-radius);
  box-shadow: var(--ny-shadow-lg);
  padding: 0.5rem;
  min-width: 240px;
}
.dropdown-item {
  color: var(--ny-body);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.dropdown-item.text-danger:hover {
  background: rgba(244, 63, 94, 0.1);
  color: var(--ny-danger);
}
.dropdown-divider {
  border-color: var(--ny-border);
  margin: 0.35rem 0;
}
.dropdown-header {
  color: var(--ny-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  padding: 0.4rem 0.75rem;
}

.dropdown-wide {
  min-width: 360px;
}
.notif-list {
  max-height: 360px;
  overflow: auto;
}
.notif-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.65rem;
  border-radius: 10px;
}
.notif-item:hover {
  background: var(--ny-hover);
}
.notif-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
}
.notif-meta {
  font-size: 0.8rem;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.notif-meta small {
  color: var(--ny-muted);
  font-size: 0.7rem;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.apps-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.95rem 0.5rem;
  border-radius: 12px;
  color: var(--ny-body);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.apps-grid a:hover {
  background: var(--ny-hover);
  color: var(--ny-primary);
  transform: translateY(-2px);
}
.apps-grid a i {
  font-size: 1.5rem;
}

/* ============== Sidebar menu ============== */
.sidebar-header {
  height: var(--ny-topbar-h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sidebar-inner {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 0 1rem;
  position: relative;
  z-index: 1;
}
.sidebar-inner::-webkit-scrollbar {
  width: 4px;
}
.sidebar-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.menu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-caption {
  padding: 1.25rem 1.5rem 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ny-sidebar-caption);
  font-weight: 800;
}
.menu > li {
  padding: 0 0.75rem;
  margin-bottom: 2px;
}
.menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  color: var(--ny-sidebar-color);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  border-radius: 12px;
  transition: all 0.2s;
}
.menu > li > a > i {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  opacity: 0.85;
}
.menu > li > a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.menu > li > a:hover > i {
  opacity: 1;
}
.menu-arrow {
  margin-left: auto;
  transition: transform 0.25s;
  font-size: 0.9rem;
  opacity: 0.7;
}
.menu > li.open > a .menu-arrow {
  transform: rotate(90deg);
  opacity: 1;
}

.menu > li.active > a {
  background: var(--ny-grad-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(91, 61, 240, 0.4);
}
.menu > li.active > a > i {
  opacity: 1;
}
.menu > li.active > a::after {
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 30px;
  border-radius: 5px 0 0 5px;
  background: var(--ny-accent);
  box-shadow: 0 0 12px var(--ny-accent);
}

.menu-badge {
  margin-left: auto;
  padding: 0.18rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 6px;
  background: var(--ny-grad-warm);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menu-badge.bg-success {
  background: var(--ny-grad-cool);
}
.menu-badge.bg-info {
  background: var(--ny-grad-accent);
}

/* Submenu base — display:block always, control visibility via max-height (slide animation) */
.submenu {
  padding-left: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  padding-top: 0;
  display: block; /* always rendered so transitions work */
  visibility: visible;
}

/* Open only via click (.open) in expanded vertical mode — no hover */
.menu > li.open > .submenu {
  max-height: 1200px;
  padding-top: 0.3rem;
}
.menu > li.open > a .menu-arrow {
  transform: rotate(90deg);
}

/* Ensure no ancestor clips the inline submenu */
.sidebar .menu,
.sidebar .menu > li {
  overflow: visible;
}
.submenu li {
  padding: 0;
}
.submenu a {
  display: block;
  padding: 0.45rem 0.85rem 0.45rem 3rem;
  font-size: 0.8rem;
  color: var(--ny-sidebar-color);
  text-decoration: none;
  border-radius: 10px;
  position: relative;
  opacity: 0.85;
  transition: all 0.15s;
}
.submenu a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  position: absolute;
  left: 2.05rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.15s;
}
.submenu a:hover {
  color: #fff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}
.submenu a:hover::before {
  background: var(--ny-accent);
  box-shadow: 0 0 8px var(--ny-accent);
}
.submenu a.active {
  color: #fff;
  font-weight: 600;
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.submenu a.active::before {
  background: var(--ny-accent);
  box-shadow: 0 0 8px var(--ny-accent);
}

.sidebar-promo {
  margin: 1rem 0.75rem;
  padding: 1.25rem;
  border-radius: var(--ny-radius);
  background: linear-gradient(
    140deg,
    rgba(91, 61, 240, 0.4) 0%,
    rgba(34, 211, 238, 0.25) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sidebar-promo::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.sidebar-promo h6 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  position: relative;
}
.sidebar-promo p {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.85rem;
  position: relative;
}
.sidebar-promo .btn {
  position: relative;
  font-weight: 600;
}

/* ============== Page header ============== */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head h1 {
  font-size: 1.45rem;
  margin: 0 0 0.25rem;
  font-weight: 800;
}
.page-head .lead-sub {
  color: var(--ny-muted);
  font-size: 0.85rem;
  margin: 0;
}
.page-head .breadcrumb {
  margin: 0;
  font-size: 0.78rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ny-muted);
  content: "›";
}
.breadcrumb-item a {
  color: var(--ny-muted);
  text-decoration: none;
}
.breadcrumb-item.active {
  color: var(--ny-primary);
  font-weight: 600;
}

/* ============== Cards ============== */
.card {
  background: var(--ny-card);
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius);
  box-shadow: var(--ny-shadow-xs);
  color: var(--ny-body);
  position: relative;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ny-border-soft);
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-header h5,
.card-header h6,
.card-header .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.card-body > .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--ny-heading);
}
.card-body > .card-subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ny-muted);
  margin-top: 0;
}
.card-body .card-text {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ny-body);
}
.card-body .card-link {
  font-size: 0.82rem;
  font-weight: 600;
  margin-right: 0.85rem;
}
.card-header .small-sub {
  color: var(--ny-muted);
  font-size: 0.76rem;
  margin: 0.15rem 0 0;
}
.card-body {
  padding: 1.35rem;
}

/* ---- Chart containers fill their card body width ---- */
.card-body > [id^="apex"],
.card-body > [id^="ec"],
.card-body > [id^="dash"],
.card-body > [id^="live"],
.card-body > [id^="cmp"],
.card-body > [id^="ms"],
.card-body > [id^="cjs"],
.card-body > [id^="goal"],
.card-body > [id^="kpi"],
.card-body > [id^="sales"],
.card-body > [id^="routes"],
.card-body > [id^="hm"],
.card-body > [id^="sp"],
.card-body > [id^="srv"],
.card-body > [id^="tkr"],
.card-body > [id^="varL"],
.card-body > [id^="varA"],
.card-body > [id^="varB"],
.card-body > [id^="act"],
.card-body > [id^="lb"],
.card-body > [id^="worldMap"],
.card-body > [id^="liveMap"],
.card-body > [id^="salesMap"],
.card-body > [id^="routesMap"],
.card-body > canvas {
  width: 100% !important;
  max-width: 100%;
}
.card-body {
  overflow-x: hidden;
}
.card-body .apexcharts-canvas svg,
.card-body .apexcharts-canvas {
  max-width: 100% !important;
}
/* RTL: invert visual flow of chart canvas (Apex/Chart.js/ECharts content stays same coords,
   but mirror the canvas so axes/legends read right-to-left as a visual quick-fix) */
[dir="rtl"] .card-body .apexcharts-toolbar {
  left: 0 !important;
  right: auto !important;
}
[dir="rtl"] .card-body .apexcharts-legend {
  direction: rtl;
}
[dir="rtl"] .card-body .apexcharts-tooltip {
  direction: rtl;
  text-align: right;
}
.card-footer {
  background: transparent;
  border-top: 1px solid var(--ny-border-soft);
  padding: 0.9rem 1.35rem;
}

/* Card with accent ribbon */
.card-ribbon {
  overflow: hidden;
}
.card-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ny-grad-primary);
}
.card-ribbon.ribbon-cool::before {
  background: var(--ny-grad-cool);
}
.card-ribbon.ribbon-warm::before {
  background: var(--ny-grad-warm);
}
.card-ribbon.ribbon-mint::before {
  background: var(--ny-grad-mint);
}
.card-ribbon.ribbon-rose::before {
  background: var(--ny-grad-rose);
}
.card-ribbon.ribbon-amber::before {
  background: var(--ny-grad-amber);
}

/* Solid gradient card */
.card-solid {
  border: 0;
  color: #fff;
  background: var(--ny-grad-primary);
  box-shadow: 0 16px 40px rgba(91, 61, 240, 0.35);
}
.card-solid.solid-cool {
  background: var(--ny-grad-cool);
  box-shadow: 0 16px 40px rgba(14, 165, 233, 0.3);
}
.card-solid.solid-warm {
  background: var(--ny-grad-warm);
  box-shadow: 0 16px 40px rgba(244, 63, 94, 0.3);
}
.card-solid.solid-mint {
  background: var(--ny-grad-mint);
  box-shadow: 0 16px 40px rgba(20, 184, 166, 0.3);
}
.card-solid.solid-amber {
  background: var(--ny-grad-amber);
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.3);
}
.card-solid h1,
.card-solid h2,
.card-solid h3,
.card-solid h4,
.card-solid h5,
.card-solid h6 {
  color: #fff;
}
.card-solid .card-header {
  border-color: rgba(255, 255, 255, 0.18);
}
.card-solid .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}
.card-solid::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transform: translate(40%, -40%);
  pointer-events: none;
}

/* Stat tile - unique block */
.stat-tile {
  padding: 1.35rem;
  position: relative;
  overflow: hidden;
}
.stat-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ny-grad-primary);
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(91, 61, 240, 0.35);
}
.stat-icon-wrap.cool {
  background: var(--ny-grad-cool);
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.3);
}
.stat-icon-wrap.warm {
  background: var(--ny-grad-warm);
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.3);
}
.stat-icon-wrap.mint {
  background: var(--ny-grad-mint);
  box-shadow: 0 10px 24px rgba(20, 184, 166, 0.3);
}
.stat-icon-wrap.amber {
  background: var(--ny-grad-amber);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.3);
}
.stat-icon-wrap.rose {
  background: var(--ny-grad-rose);
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.3);
}
.stat-tile .stat-label {
  color: var(--ny-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.stat-tile .stat-value {
  font-size: 1.95rem;
  font-weight: 800;
  color: var(--ny-heading);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.stat-tile .stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
}
.stat-tile .stat-delta.up {
  background: rgba(20, 184, 166, 0.12);
  color: var(--ny-success);
}
.stat-tile .stat-delta.down {
  background: rgba(244, 63, 94, 0.12);
  color: var(--ny-danger);
}
.stat-tile .stat-extra {
  font-size: 0.73rem;
  color: var(--ny-muted);
  margin-left: 0.5rem;
}
.stat-tile .stat-corner {
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 61, 240, 0.06), transparent);
  pointer-events: none;
}

/* Hero metric card (one big number) */
.hero-metric {
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
  background: var(--ny-grad-primary);
  color: #fff;
  border-radius: var(--ny-radius-lg);
  box-shadow: 0 20px 50px rgba(91, 61, 240, 0.4);
}
.hero-metric::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 80%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.3) 0%,
    transparent 60%
  );
}
.hero-metric .hero-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.85;
  position: relative;
}
.hero-metric .hero-value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: "Plus Jakarta Sans", sans-serif;
  position: relative;
}
.hero-metric .hero-desc {
  font-size: 0.85rem;
  opacity: 0.85;
  position: relative;
}

/* ============== Buttons ============== */
.btn {
  font-weight: 600;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  border-radius: 8px;
}
.btn-lg {
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  border-radius: 12px;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--ny-grad-primary);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 61, 240, 0.35);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ny-grad-primary);
  color: #fff;
  box-shadow: 0 10px 25px rgba(91, 61, 240, 0.45);
  transform: translateY(-1px);
}
.btn-accent {
  background: var(--ny-grad-accent);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.35);
}
.btn-warm {
  background: var(--ny-grad-warm);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.3);
}
.btn-mint {
  background: var(--ny-grad-mint);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(20, 184, 166, 0.3);
}
.btn-light {
  background: var(--ny-card);
  color: var(--ny-heading);
  border: 1px solid var(--ny-border);
}
.btn-light:hover {
  background: var(--ny-hover);
  border-color: var(--ny-border);
  color: var(--ny-primary);
}
.btn-soft-primary {
  background: rgba(91, 61, 240, 0.1);
  color: var(--ny-primary);
  border: 0;
}
.btn-soft-primary:hover {
  background: var(--ny-primary);
  color: #fff;
}
.btn-soft-success {
  background: rgba(20, 184, 166, 0.1);
  color: var(--ny-success);
  border: 0;
}
.btn-soft-success:hover {
  background: var(--ny-success);
  color: #fff;
}
.btn-soft-info {
  background: rgba(14, 165, 233, 0.1);
  color: var(--ny-info);
  border: 0;
}
.btn-soft-info:hover {
  background: var(--ny-info);
  color: #fff;
}
.btn-soft-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--ny-warning);
  border: 0;
}
.btn-soft-warning:hover {
  background: var(--ny-warning);
  color: #fff;
}
.btn-soft-danger {
  background: rgba(244, 63, 94, 0.1);
  color: var(--ny-danger);
  border: 0;
}
.btn-soft-danger:hover {
  background: var(--ny-danger);
  color: #fff;
}
.btn-soft-secondary {
  background: var(--ny-hover);
  color: var(--ny-body);
  border: 0;
}
.btn-soft-secondary:hover {
  background: var(--ny-border);
  color: var(--ny-heading);
}
.btn-outline-primary {
  color: var(--ny-primary);
  border: 1.5px solid var(--ny-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--ny-primary);
  color: #fff;
}
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
}
.btn-icon i {
  font-size: 1.05rem;
}
.btn-icon.btn-sm {
  width: 34px;
  height: 34px;
}

/* ============== Badges ============== */
.badge {
  padding: 0.35em 0.65em;
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.badge.bg-primary {
  background: var(--ny-primary) !important;
}
.badge-soft-primary {
  background: rgba(91, 61, 240, 0.1);
  color: var(--ny-primary);
}
.badge-soft-success {
  background: rgba(20, 184, 166, 0.12);
  color: var(--ny-success);
}
.badge-soft-info {
  background: rgba(14, 165, 233, 0.12);
  color: var(--ny-info);
}
.badge-soft-warning {
  background: rgba(245, 158, 11, 0.14);
  color: var(--ny-warning);
}
.badge-soft-danger {
  background: rgba(244, 63, 94, 0.12);
  color: var(--ny-danger);
}
.badge-soft-secondary {
  background: var(--ny-hover);
  color: var(--ny-body);
}
.badge-gradient {
  background: var(--ny-grad-primary);
  color: #fff;
}

/* ============== Forms ============== */
.form-control,
.form-select {
  background: var(--ny-input-bg);
  border: 1px solid var(--ny-input-border);
  color: var(--ny-body);
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  border-radius: 10px;
  transition: all 0.15s;
}
.form-control:focus,
.form-select:focus {
  background: var(--ny-card);
  color: var(--ny-body);
  border-color: var(--ny-primary);
  box-shadow: var(--ny-glow);
}
.form-control::placeholder {
  color: var(--ny-muted);
}
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ny-heading);
}
.input-group-text {
  background: var(--ny-input-bg);
  border: 1px solid var(--ny-input-border);
  color: var(--ny-muted);
  font-size: 0.85rem;
  border-radius: 10px;
}
.form-check-input {
  background-color: var(--ny-input-bg);
  border-color: var(--ny-input-border);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--ny-primary);
  border-color: var(--ny-primary);
}
.form-check-input:focus {
  box-shadow: var(--ny-glow);
}
.form-switch .form-check-input {
  width: 2.4em;
  height: 1.3em;
}

/* ============== Tables ============== */
.table {
  color: var(--ny-body);
  --bs-table-bg: transparent;
  vertical-align: middle;
}
.table > :not(caption) > * > * {
  padding: 0.9rem 1.1rem;
  border-bottom-color: var(--ny-border-soft);
}
.table > thead th {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ny-muted);
  background: transparent;
  border-bottom: 1px solid var(--ny-border);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.table-hover > tbody > tr {
  transition: background 0.12s;
}
.table-hover > tbody > tr:hover > * {
  background: var(--ny-hover);
  --bs-table-accent-bg: transparent;
}
.table-borderless > :not(caption) > * > * {
  border: 0;
}

/* ============== Tabs ============== */
.nav-tabs {
  border-bottom: 1px solid var(--ny-border);
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  color: var(--ny-body);
  border: 0;
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-tabs .nav-link:hover {
  color: var(--ny-primary);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--ny-primary);
  background: transparent;
  border-bottom-color: var(--ny-primary);
}
.nav-pills {
  gap: 0.35rem;
}
.nav-pills .nav-link {
  color: var(--ny-body);
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--ny-bg);
}
.nav-pills .nav-link.active {
  background: var(--ny-grad-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(91, 61, 240, 0.3);
}
.nav-pills .nav-link:hover:not(.active) {
  background: var(--ny-hover);
  color: var(--ny-primary);
}

/* ============== Modal/Offcanvas ============== */
.modal-content {
  background: var(--ny-card);
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius);
  color: var(--ny-body);
  box-shadow: var(--ny-shadow-lg);
}
.modal-header,
.modal-footer {
  border-color: var(--ny-border);
}
.modal-header {
  padding: 1.25rem 1.5rem;
}
.modal-body {
  padding: 1.5rem;
}
.offcanvas {
  background: var(--ny-card);
  border-color: var(--ny-border);
  color: var(--ny-body);
}
.offcanvas-header {
  border-bottom: 1px solid var(--ny-border);
  padding: 1.25rem 1.5rem;
}

/* ============== Progress ============== */
.progress {
  background: var(--ny-hover);
  border-radius: 12px;
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  background: var(--ny-grad-primary);
  border-radius: inherit;
}
.progress-bar.bg-success {
  background: var(--ny-grad-mint) !important;
}
.progress-bar.bg-warning {
  background: var(--ny-grad-amber) !important;
}
.progress-bar.bg-danger {
  background: var(--ny-grad-warm) !important;
}
.progress-bar.bg-info {
  background: var(--ny-grad-cool) !important;
}
.progress-sm {
  height: 5px;
}
.progress-lg {
  height: 16px;
  font-size: 0.7rem;
  font-weight: 700;
}
.progress-xl {
  height: 22px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ============== Alerts ============== */
.alert {
  border-radius: var(--ny-radius-sm);
  border: 1px solid transparent;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.alert-primary {
  background: rgba(91, 61, 240, 0.08);
  color: var(--ny-primary);
  border-color: rgba(91, 61, 240, 0.18);
}
.alert-success {
  background: rgba(20, 184, 166, 0.08);
  color: var(--ny-success);
  border-color: rgba(20, 184, 166, 0.18);
}
.alert-info {
  background: rgba(14, 165, 233, 0.08);
  color: var(--ny-info);
  border-color: rgba(14, 165, 233, 0.18);
}
.alert-warning {
  background: rgba(245, 158, 11, 0.08);
  color: var(--ny-warning);
  border-color: rgba(245, 158, 11, 0.18);
}
.alert-danger {
  background: rgba(244, 63, 94, 0.08);
  color: var(--ny-danger);
  border-color: rgba(244, 63, 94, 0.18);
}

/* ============== Customizer ============== */
.cz-section {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ny-border-soft);
}
.cz-section h6 {
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
  color: var(--ny-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cz-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}
.cz-swatch {
  aspect-ratio: 1;
  border-radius: 10px;
  cursor: pointer;
  border: 2.5px solid transparent;
  position: relative;
  transition: transform 0.15s;
}
.cz-swatch:hover {
  transform: scale(1.08);
}
.cz-swatch.active {
  border-color: var(--ny-heading);
}
.cz-swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}
.cz-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.cz-layout-opt {
  padding: 1rem;
  border-radius: 12px;
  border: 2px solid var(--ny-border);
  background: var(--ny-card);
  text-align: center;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ny-body);
  transition: all 0.15s;
}
.cz-layout-opt:hover {
  border-color: var(--ny-primary);
}
.cz-layout-opt.active {
  border-color: var(--ny-primary);
  background: rgba(91, 61, 240, 0.06);
  color: var(--ny-primary);
}
.cz-layout-opt i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.35rem;
  opacity: 0.9;
}
.cz-segment {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--ny-hover);
  border-radius: 10px;
}
.cz-segment label {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.cz-segment input {
  display: none;
}
.cz-segment input:checked + span {
  background: var(--ny-card);
  color: var(--ny-primary);
  display: block;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: var(--ny-shadow-xs);
  margin: -0.5rem;
}

/* ============== Misc ============== */
.text-primary {
  color: var(--ny-primary) !important;
}
.text-success {
  color: var(--ny-success) !important;
}
.text-info {
  color: var(--ny-info) !important;
}
.text-warning {
  color: var(--ny-warning) !important;
}
.text-danger {
  color: var(--ny-danger) !important;
}
.text-gradient {
  background: var(--ny-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-primary {
  background: var(--ny-primary) !important;
}
.bg-success {
  background: var(--ny-success) !important;
}
.bg-info {
  background: var(--ny-info) !important;
}
.bg-warning {
  background: var(--ny-warning) !important;
}
.bg-danger {
  background: var(--ny-danger) !important;
}
.bg-primary-soft {
  background: rgba(91, 61, 240, 0.1) !important;
  color: var(--ny-primary) !important;
}
.bg-success-soft {
  background: rgba(20, 184, 166, 0.12) !important;
  color: var(--ny-success) !important;
}
.bg-info-soft {
  background: rgba(14, 165, 233, 0.12) !important;
  color: var(--ny-info) !important;
}
.bg-warning-soft {
  background: rgba(245, 158, 11, 0.14) !important;
  color: var(--ny-warning) !important;
}
.bg-danger-soft {
  background: rgba(244, 63, 94, 0.12) !important;
  color: var(--ny-danger) !important;
}

.rounded-pill {
  border-radius: 99px !important;
}
.rounded-tile {
  border-radius: var(--ny-radius) !important;
}
.rounded-tile-lg {
  border-radius: var(--ny-radius-lg) !important;
}
.fw-extrabold {
  font-weight: 800 !important;
}
.font-display {
  font-family: "Plus Jakarta Sans", sans-serif;
}
.font-mono {
  font-family: "JetBrains Mono", "Courier New", monospace;
}

/* Apex chart text colors */
.apexcharts-text,
.apexcharts-legend-text {
  fill: var(--ny-body) !important;
  color: var(--ny-body) !important;
}
.apexcharts-tooltip {
  background: var(--ny-card) !important;
  border: 1px solid var(--ny-border) !important;
  color: var(--ny-body) !important;
  box-shadow: var(--ny-shadow-lg) !important;
  border-radius: 12px !important;
}
.apexcharts-tooltip-title {
  background: var(--ny-hover) !important;
  border-bottom-color: var(--ny-border) !important;
  font-weight: 700 !important;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: var(--ny-card) !important;
  border-color: var(--ny-border) !important;
  color: var(--ny-body) !important;
  border-radius: 6px !important;
}
.apexcharts-gridline {
  stroke: var(--ny-border-soft) !important;
}
.apexcharts-menu {
  background: var(--ny-card) !important;
  border-color: var(--ny-border) !important;
}
.apexcharts-menu-item:hover {
  background: var(--ny-hover) !important;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 1.85rem;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(
    1.85rem - 1.5rem + 8px - 1px
  ); /* timeline-padding - item-offset + circle-radius - line-half */
  width: 2px;
  background: var(--ny-border);
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.3rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ny-card);
  border: 3px solid var(--ny-primary);
  box-shadow: 0 0 0 4px rgba(91, 61, 240, 0.12);
}
.timeline-item.success::before {
  border-color: var(--ny-success);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}
.timeline-item.warning::before {
  border-color: var(--ny-warning);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}
.timeline-item.danger::before {
  border-color: var(--ny-danger);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.12);
}
.timeline-item .tl-time {
  font-size: 0.7rem;
  color: var(--ny-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.timeline-item .tl-title {
  font-weight: 700;
  color: var(--ny-heading);
  font-size: 0.9rem;
  margin: 0.15rem 0;
}
.timeline-item .tl-text {
  font-size: 0.82rem;
  color: var(--ny-muted);
}

/* Activity list */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--ny-border-soft);
}
.activity-list li:last-child {
  border-bottom: 0;
}
.activity-list .a-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.activity-list .a-meta {
  font-size: 0.85rem;
  line-height: 1.4;
}
.activity-list .a-meta small {
  color: var(--ny-muted);
  font-size: 0.72rem;
  display: block;
  margin-top: 0.15rem;
}

/* Kanban */
.kanban {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.kanban-col {
  flex: 0 0 290px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.35rem 0.85rem;
  font-weight: 700;
  color: var(--ny-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kanban-col-head .col-count {
  background: var(--ny-hover);
  padding: 0.1rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
}
.kanban-col-body {
  background: var(--ny-card-2);
  border-radius: var(--ny-radius);
  padding: 0.85rem;
  min-height: 200px;
  border: 1px dashed var(--ny-border);
}
.kanban-card {
  background: var(--ny-card);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  box-shadow: var(--ny-shadow-xs);
  cursor: grab;
  border: 1px solid var(--ny-border-soft);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ny-shadow-sm);
}
.kanban-card h6 {
  font-size: 0.87rem;
  margin-bottom: 0.35rem;
}
.kanban-card p {
  font-size: 0.76rem;
  color: var(--ny-muted);
  margin: 0 0 0.65rem 0;
}
.kanban-card .label-strip {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--ny-primary);
  margin-bottom: 0.55rem;
}
.kanban-card .label-strip.label-cool {
  background: var(--ny-grad-cool);
}
.kanban-card .label-strip.label-warm {
  background: var(--ny-grad-warm);
}
.kanban-card .label-strip.label-mint {
  background: var(--ny-grad-mint);
}
.kanban-card .label-strip.label-amber {
  background: var(--ny-grad-amber);
}

/* Email app */
.mail-shell {
  display: grid;
  grid-template-columns: 240px 380px 1fr;
  gap: 1rem;
  min-height: 70vh;
}
@media (max-width: 1199.98px) {
  .mail-shell {
    grid-template-columns: 240px 1fr;
  }
  .mail-content-pane {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .mail-shell {
    grid-template-columns: 1fr;
  }
  .mail-list-pane {
    display: none;
  }
}
.mail-folders {
  padding: 1rem;
}
.mail-folder {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: var(--ny-body);
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}
.mail-folder i {
  font-size: 1.15rem;
  opacity: 0.85;
}
.mail-folder:hover {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.mail-folder.active {
  background: rgba(91, 61, 240, 0.1);
  color: var(--ny-primary);
  font-weight: 600;
}
.mail-folder .count {
  margin-left: auto;
  font-size: 0.72rem;
}
.mail-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ny-border-soft);
  cursor: pointer;
}
.mail-item:hover {
  background: var(--ny-hover);
}
.mail-item.unread {
  background: rgba(91, 61, 240, 0.04);
}
.mail-item.active {
  background: rgba(91, 61, 240, 0.08);
  border-left: 3px solid var(--ny-primary);
  padding-left: calc(1.25rem - 3px);
}
.mail-item .mi-from {
  font-weight: 700;
  color: var(--ny-heading);
  font-size: 0.82rem;
}
.mail-item .mi-subj {
  font-size: 0.82rem;
  color: var(--ny-body);
  margin: 0.15rem 0;
  font-weight: 500;
}
.mail-item .mi-prev {
  font-size: 0.75rem;
  color: var(--ny-muted);
}
.mail-item .mi-time {
  font-size: 0.7rem;
  color: var(--ny-muted);
}

/* Chat */
.chat-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 75vh;
  border-radius: var(--ny-radius);
  overflow: hidden;
  background: var(--ny-card);
  border: 1px solid var(--ny-border);
}
@media (max-width: 767.98px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
}
.chat-list-pane {
  border-right: 1px solid var(--ny-border);
  display: flex;
  flex-direction: column;
}
.chat-conv {
  display: flex;
  flex-direction: column;
}
.chat-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ny-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chat-msgs {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
}
.chat-input {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--ny-border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.chat-input input {
  flex: 1;
  background: var(--ny-input-bg);
  border: 0;
  border-radius: 99px;
  padding: 0.7rem 1.15rem;
  color: var(--ny-body);
}
.chat-input input:focus {
  outline: none;
  box-shadow: var(--ny-glow);
  background: var(--ny-card);
}
.bubble {
  max-width: 70%;
  padding: 0.7rem 1rem;
  border-radius: 18px;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.bubble-in {
  background: var(--ny-hover);
  color: var(--ny-body);
  border-bottom-left-radius: 4px;
}
.bubble-out {
  background: var(--ny-grad-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-left: auto;
  box-shadow: 0 6px 16px rgba(91, 61, 240, 0.3);
}
.bubble-time {
  display: block;
  font-size: 0.68rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}
.chat-conv-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px solid var(--ny-border-soft);
}
.chat-conv-item:hover {
  background: var(--ny-hover);
}
.chat-conv-item.active {
  background: rgba(91, 61, 240, 0.08);
}
.chat-conv-item .ccm-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ny-heading);
}
.chat-conv-item .ccm-last {
  font-size: 0.76rem;
  color: var(--ny-muted);
}
.chat-conv-item .ccm-time {
  font-size: 0.68rem;
  color: var(--ny-muted);
}

/* Auth */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(91, 61, 240, 0.12) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(34, 211, 238, 0.1) 0%,
      transparent 40%
    );
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--ny-card);
  border-radius: var(--ny-radius-lg);
  box-shadow: var(--ny-shadow-lg);
  padding: 2.5rem;
  position: relative;
  border: 1px solid var(--ny-border);
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}
.auth-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.auth-cover .auth-cover-side {
  background: var(--ny-grad-primary);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-cover .auth-cover-side::before {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.auth-cover .auth-cover-side::after {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.18);
}
.auth-cover .auth-form-side {
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ny-bg);
}
.auth-cover .auth-card {
  box-shadow: none;
  padding: 0;
  max-width: 420px;
  background: transparent;
  border: 0;
}
@media (max-width: 991.98px) {
  .auth-cover {
    grid-template-columns: 1fr;
  }
  .auth-cover .auth-cover-side {
    display: none;
  }
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.25rem 0;
  color: var(--ny-muted);
  font-size: 0.75rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ny-border);
}

.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ny-border);
  background: var(--ny-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.15s;
  color: var(--ny-body);
}
.social-btn:hover {
  border-color: var(--ny-primary);
  color: var(--ny-primary);
  transform: translateY(-2px);
}

/* Error pages */
.err-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.err-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(91, 61, 240, 0.1), transparent 50%),
    radial-gradient(
      circle at 70% 60%,
      rgba(34, 211, 238, 0.08),
      transparent 50%
    );
}
.err-code {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  background: var(--ny-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.04em;
  position: relative;
}

/* Pricing */
.pricing-card {
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:not(.featured):hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
  border-color: rgba(var(--ny-primary-rgb), 0.35);
}
.pricing-card.featured {
  background: var(--ny-grad-primary);
  color: #fff;
  border-color: transparent;
  transform: scale(1.04);
  z-index: 2;
  box-shadow: 0 24px 50px rgba(91, 61, 240, 0.4);
}
.pricing-card.featured:hover {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 32px 60px rgba(91, 61, 240, 0.5);
}
.pricing-card.featured h4,
.pricing-card.featured .pricing-price {
  color: #fff;
}
.pricing-card.featured .pricing-features li {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}
.pricing-card.featured .pricing-features li i {
  color: var(--ny-accent);
}
.pricing-card.featured .btn {
  background: #fff;
  color: var(--ny-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.pricing-price {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ny-heading);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1;
}
.pricing-price small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ny-muted);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}
.pricing-features li {
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--ny-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.pricing-features li i {
  color: var(--ny-success);
}

/* Calendar */
.fc {
  font-family: "Inter", sans-serif;
}
.fc .fc-toolbar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ny-heading);
}
.fc .fc-button {
  background: var(--ny-hover) !important;
  border: 0 !important;
  color: var(--ny-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.75rem !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--ny-primary) !important;
  color: #fff !important;
}
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
  color: var(--ny-body);
}
.fc .fc-day-today {
  background: rgba(91, 61, 240, 0.06) !important;
}
.fc-event {
  border-radius: 6px !important;
  border: 0 !important;
  padding: 2px 6px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* File mgr */
.file-card {
  padding: 1.2rem;
  text-align: center;
  border-radius: var(--ny-radius);
  background: var(--ny-card);
  border: 1px solid var(--ny-border);
  transition: all 0.15s;
  cursor: pointer;
}
.file-card:hover {
  border-color: var(--ny-primary);
  box-shadow: var(--ny-shadow-sm);
  transform: translateY(-2px);
}
.file-card i {
  font-size: 2.5rem;
}
.file-card .f-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.65rem;
  color: var(--ny-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-card .f-size {
  font-size: 0.72rem;
  color: var(--ny-muted);
}
.folder-card .fl-ic {
  background: rgba(91, 61, 240, 0.1);
  color: var(--ny-primary);
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

/* Invoice */
.invoice-paper {
  padding: 2.5rem;
}
.invoice-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
}

/* Wallet card */
.wallet-card {
  background: var(--ny-grad-primary);
  color: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(91, 61, 240, 0.35);
}
.wallet-card .w-chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  border-radius: 5px;
  position: relative;
}
.wallet-card .w-num {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 3px;
  font-size: 1.15rem;
}
.wallet-card::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.wallet-card::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.18);
}

/* Decorative geometric blob (for hero areas) */
.blob {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle, var(--ny-primary) 0%, transparent 70%);
  opacity: 0.14;
  filter: blur(40px);
  border-radius: 50%;
}

/* RTL */
/* Keep the page scrollbar on the visual right edge in RTL
   (browsers default it to the left under dir=rtl, which makes the page look
   like it has extra left padding). Force html LTR for scrollbar placement,
   but keep body and all descendants flowing RTL. */
html[dir="rtl"] {
  direction: ltr;
}
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
}
[dir="rtl"] .content {
  margin-left: 0;
  margin-right: var(--ny-sidebar-w);
}
[dir="rtl"] body.sidebar-mini .content {
  margin-right: var(--ny-sidebar-w-mini);
}
[dir="rtl"] .menu > li.active > a::after {
  right: auto;
  left: -0.75rem;
  border-radius: 0 5px 5px 0;
}
[dir="rtl"] .submenu a {
  padding-right: 3rem;
  padding-left: 0.85rem;
}
[dir="rtl"] .submenu a::before {
  left: auto;
  right: 2.05rem;
}
[dir="rtl"] .topbar-search input {
  padding: 0 2.6rem 0 1rem;
}
[dir="rtl"] .topbar-search > i {
  left: auto;
  right: 1rem;
}
[dir="rtl"] .menu-arrow {
  transform: rotate(180deg);
}
[dir="rtl"] .menu > li.open > a .menu-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (max-width: 991.98px) {
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }
  [dir="rtl"] body.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

/* ====================================================================
   PAGINATION — Nyvora attractive overrides
   ==================================================================== */
.pagination {
  --bs-pagination-color: var(--ny-body);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: var(--ny-primary);
  --bs-pagination-hover-bg: var(--ny-hover);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-color: var(--ny-primary);
  --bs-pagination-focus-bg: var(--ny-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(var(--ny-primary-rgb), 0.12);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--ny-primary);
  --bs-pagination-active-border-color: var(--ny-primary);
  --bs-pagination-disabled-color: var(--ny-muted);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-border-radius: 10px;
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.5rem;
  --bs-pagination-font-size: 0.82rem;
  gap: 0.25rem;
}
.pagination .page-link {
  border: 0;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.15s ease;
  color: var(--ny-body);
}
.pagination .page-link:hover {
  color: var(--ny-primary);
  background: var(--ny-hover);
  transform: translateY(-1px);
}
.pagination .page-item.active .page-link {
  background: var(--ny-grad-primary);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--ny-primary-rgb), 0.35);
  transform: translateY(-1px);
}
.pagination .page-item.disabled .page-link {
  color: var(--ny-muted);
  background: transparent;
  opacity: 0.5;
}
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Pagination sizes */
.pagination-sm .page-link {
  min-width: 30px;
  height: 30px;
  font-size: 0.75rem;
  border-radius: 8px;
}
.pagination-lg .page-link {
  min-width: 48px;
  height: 48px;
  font-size: 0.95rem;
  border-radius: 12px;
}

/* Rounded pill pagination variant */
.pagination.pagination-pill .page-link {
  border-radius: 99px;
}

/* ====================================================================
   ACCORDION — Nyvora attractive overrides
   ==================================================================== */
.accordion {
  --bs-accordion-color: var(--ny-body);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--ny-border);
  --bs-accordion-border-radius: var(--ny-radius);
  --bs-accordion-inner-border-radius: var(--ny-radius);
  --bs-accordion-btn-color: var(--ny-heading);
  --bs-accordion-btn-bg: var(--ny-card);
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-focus-border-color: var(--ny-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 4px
    rgba(var(--ny-primary-rgb), 0.12);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1.1rem;
  --bs-accordion-active-color: var(--ny-primary);
  --bs-accordion-active-bg: rgba(var(--ny-primary-rgb), 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.accordion-item {
  background: var(--ny-card);
  border: 1px solid var(--ny-border) !important;
  border-radius: var(--ny-radius) !important;
  overflow: hidden;
  box-shadow: var(--ny-shadow-xs);
  transition: all 0.2s ease;
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(var(--ny-primary-rgb), 0.25) !important;
  box-shadow: 0 8px 24px rgba(var(--ny-primary-rgb), 0.08);
}
.accordion-item:first-of-type,
.accordion-item:last-of-type {
  border-radius: var(--ny-radius) !important;
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--ny-radius);
  border-top-right-radius: var(--ny-radius);
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: var(--ny-radius);
  border-bottom-right-radius: var(--ny-radius);
}

.accordion-button {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ny-heading);
  background: var(--ny-card);
  padding: 1.1rem 1.35rem;
  border: 0;
  transition: all 0.2s ease;
  gap: 0.85rem;
  position: relative;
}
.accordion-button:hover {
  background: var(--ny-hover);
  color: var(--ny-primary);
}
.accordion-button:not(.collapsed) {
  background: var(--ny-card);
  color: var(--ny-primary);
  box-shadow: none;
  font-weight: 700;
}
.accordion-button:not(.collapsed)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ny-grad-primary);
  border-radius: 0 3px 3px 0;
}
.accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(var(--ny-primary-rgb), 0.12);
  border-color: transparent;
  z-index: 3;
}

/* Replace default caret with a custom plus/minus circle */
.accordion-button::after {
  background-image: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ny-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.accordion-button::after {
  /* plus icon (horizontal) */
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size:
    12px 2px,
    2px 12px;
  color: var(--ny-muted);
}
.accordion-button:not(.collapsed)::after {
  background-color: transparent;
  background-image: linear-gradient(#fff, #fff), var(--ny-grad-primary);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size:
    12px 2px,
    100% 100%;
  transform: none;
  color: #fff;
  box-shadow: 0 4px 10px rgba(var(--ny-primary-rgb), 0.35);
}

.accordion-body {
  padding: 1rem 1.35rem 1.35rem;
  color: var(--ny-body);
  font-size: 0.87rem;
  line-height: 1.6;
  border-top: 1px solid var(--ny-border-soft);
}

/* Flush variant - no borders/shadows between items */
.accordion-flush {
  gap: 0;
  border-radius: var(--ny-radius);
  overflow: hidden;
  border: 1px solid var(--ny-border);
}
.accordion-flush .accordion-item {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ny-border-soft) !important;
  box-shadow: none;
  background: transparent;
}
.accordion-flush .accordion-item:last-of-type {
  border-bottom: 0 !important;
}
.accordion-flush .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: none;
}
.accordion-flush .accordion-button {
  background: transparent;
}
.accordion-flush .accordion-button:not(.collapsed)::before {
  display: none;
}

/* ====================================================================
   POPOVER — Nyvora overrides for clean design system fit
   ==================================================================== */
.popover {
  --bs-popover-bg: var(--ny-card);
  --bs-popover-border-color: var(--ny-border);
  --bs-popover-border-radius: var(--ny-radius);
  --bs-popover-inner-border-radius: var(--ny-radius);
  --bs-popover-header-bg: var(--ny-card);
  --bs-popover-header-color: var(--ny-heading);
  --bs-popover-body-color: var(--ny-body);
  --bs-popover-arrow-border: var(--ny-border);
  --bs-popover-max-width: 320px;
  --bs-popover-font-size: 0.85rem;
  border: 1px solid var(--ny-border) !important;
  box-shadow: var(--ny-shadow-lg);
  border-radius: var(--ny-radius) !important;
}
.popover-header {
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--ny-border-soft);
  background: linear-gradient(
    135deg,
    rgba(var(--ny-primary-rgb), 0.06),
    rgba(34, 211, 238, 0.06)
  );
  border-radius: var(--ny-radius) var(--ny-radius) 0 0;
}
.popover-header::before {
  display: none; /* remove Bootstrap's default arrow bg */
}
.popover-body {
  padding: 0.85rem 1rem;
  color: var(--ny-body);
  line-height: 1.55;
}
.popover .popover-arrow::before,
.popover .popover-arrow::after {
  border-color: transparent;
}
/* Color variants (apply class to .popover via JS or via data-bs-custom-class) */
.popover.popover-primary {
  border-color: var(--ny-primary) !important;
}
.popover.popover-primary .popover-header {
  background: var(--ny-primary);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.popover.popover-success {
  border-color: var(--ny-success) !important;
}
.popover.popover-success .popover-header {
  background: var(--ny-success);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.popover.popover-warning {
  border-color: var(--ny-warning) !important;
}
.popover.popover-warning .popover-header {
  background: var(--ny-warning);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.popover.popover-danger {
  border-color: var(--ny-danger) !important;
}
.popover.popover-danger .popover-header {
  background: var(--ny-danger);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.popover.popover-dark {
  border-color: #0f172a !important;
  background: #0f172a;
}
.popover.popover-dark .popover-header {
  background: #0f172a;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.popover.popover-dark .popover-body {
  color: #cbd5e1;
}
/* Wider popover variant */
.popover.popover-wide {
  max-width: 380px !important;
}

/* ====================================================================
   TOOLTIP — Nyvora styling overrides
   ==================================================================== */
.tooltip {
  --bs-tooltip-bg: var(--ny-heading);
  --bs-tooltip-color: var(--ny-card);
  --bs-tooltip-padding-x: 0.65rem;
  --bs-tooltip-padding-y: 0.4rem;
  --bs-tooltip-font-size: 0.75rem;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-max-width: 220px;
}
.tooltip-inner {
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--ny-shadow);
}
/* Color variants via data-bs-custom-class */
.tooltip.tt-primary {
  --bs-tooltip-bg: var(--ny-primary);
  --bs-tooltip-color: #fff;
}
.tooltip.tt-success {
  --bs-tooltip-bg: var(--ny-success);
  --bs-tooltip-color: #fff;
}
.tooltip.tt-info {
  --bs-tooltip-bg: var(--ny-info);
  --bs-tooltip-color: #fff;
}
.tooltip.tt-warning {
  --bs-tooltip-bg: var(--ny-warning);
  --bs-tooltip-color: #fff;
}
.tooltip.tt-danger {
  --bs-tooltip-bg: var(--ny-danger);
  --bs-tooltip-color: #fff;
}
.tooltip.tt-light {
  --bs-tooltip-bg: var(--ny-card);
  --bs-tooltip-color: var(--ny-heading);
}
.tooltip.tt-light .tooltip-inner {
  border: 1px solid var(--ny-border);
}
.tooltip.tt-gradient .tooltip-inner {
  background: var(--ny-grad-primary);
  color: #fff;
}
/* Larger tooltip for rich content */
.tooltip.tt-wide {
  --bs-tooltip-max-width: 320px;
}
.tooltip.tt-wide .tooltip-inner {
  padding: 0.75rem 1rem;
  line-height: 1.5;
}

/* ====================================================================
   UNIQUE SIDEBAR ENHANCEMENTS — distinctive visual identity
   ==================================================================== */

/* Floating gradient orbs in the sidebar background (animated) */
.sidebar > .sidebar-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(28px);
  opacity: 0.55;
}
.sidebar::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  animation: orbFloat 9s ease-in-out infinite;
  z-index: 0;
}
.sidebar > .sidebar-inner::before {
  content: "";
  position: absolute;
  bottom: 18%;
  left: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.35), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: orbFloat 11s ease-in-out infinite reverse;
  z-index: 0;
}
@keyframes orbFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-30px) scale(1.15);
    opacity: 0.8;
  }
}

/* Sidebar header: subtle bottom shimmer line */
.sidebar-header {
  position: relative;
  z-index: 1;
}
.sidebar-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(34, 211, 238, 0.45) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent
  );
}

/* Menu captions: dot, label, then gradient line — flex-based, no overlap */
.menu-caption {
  padding: 1.25rem 1.5rem 0.4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.menu-caption::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ny-accent);
  box-shadow: 0 0 5px rgba(34, 211, 238, 0.7);
  flex-shrink: 0;
  align-self: center;
}
.menu-caption::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
}

/* Menu items: layered visual depth + magnetic hover */
.menu > li > a {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(34, 211, 238, 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.menu > li > a:hover::before {
  opacity: 1;
}
.menu > li > a:hover > i {
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
  color: var(--ny-accent);
}
.menu > li > a > i {
  transition:
    filter 0.2s ease,
    color 0.2s ease;
}

/* Active state: gradient pill with sparkle accent */
.menu > li.active > a {
  position: relative;
  background: var(--ny-grad-primary);
}
.menu > li.active > a::after {
  /* small diamond accent sitting just outside the right edge of the pill */
  content: "";
  position: absolute;
  right: -0.65rem;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--ny-accent);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px var(--ny-accent);
  border-radius: 2px;
}
.menu > li.active > a::before {
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%
  );
  opacity: 1;
  animation: sweepShine 3s ease-in-out infinite;
}
@keyframes sweepShine {
  0%,
  100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

/* Submenu: vertical gradient connector line — passes through center of dots */
.submenu {
  position: relative;
}
.menu > li.open > .submenu::before,
.menu > li.hover-open > .submenu::before,
.menu > li:hover > .submenu::before {
  content: "";
  position: absolute;
  left: calc(
    2.05rem + 2px
  ); /* dot.left (2.05) + dot.half (3px) - line.half (1px) */
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--ny-accent),
    rgba(34, 211, 238, 0.15)
  );
  border-radius: 2px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
/* Make sure dots sit ON TOP of the line so they appear as connectors, not next to it */
.submenu a {
  z-index: 1;
}
.submenu a::before {
  z-index: 2;
}
.submenu a {
  transition: all 0.2s ease;
}
.submenu a:hover {
  transform: translateX(3px);
}

/* RTL: flip the connector line to the right side so dots stay centered on it */
[dir="rtl"] .menu > li.open > .submenu::before,
[dir="rtl"] .menu > li.hover-open > .submenu::before,
[dir="rtl"] .menu > li:hover > .submenu::before {
  left: auto;
  right: calc(2.05rem + 2px);
}
/* RTL: hover slide should move away from the line (to the left) */
[dir="rtl"] .submenu a:hover {
  transform: translateX(-3px);
}
.submenu a.active {
  background: rgba(34, 211, 238, 0.08) !important;
  color: var(--ny-accent) !important;
  font-weight: 700;
}
.submenu a.active::before {
  background: var(--ny-accent) !important;
  box-shadow: 0 0 6px var(--ny-accent) !important;
  width: 7px !important;
  height: 7px !important;
}

/* Promo card: animated conic gradient sweep */
.sidebar-promo {
  background: linear-gradient(
    140deg,
    rgba(91, 61, 240, 0.45) 0%,
    rgba(139, 92, 246, 0.35) 40%,
    rgba(34, 211, 238, 0.3) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.sidebar-promo::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--ny-radius);
  background: conic-gradient(
    from var(--shine-angle, 0deg),
    transparent,
    rgba(34, 211, 238, 0.4),
    transparent 30%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: spinShine 6s linear infinite;
  pointer-events: none;
}
@keyframes spinShine {
  to {
    --shine-angle: 360deg;
  }
}
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ====================================================================
   UNIQUE TOPBAR ENHANCEMENTS
   ==================================================================== */

/* Bottom gradient accent line */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 61, 240, 0.4) 30%,
    rgba(34, 211, 238, 0.4) 70%,
    transparent
  );
  z-index: 2;
}

/* Icon button: hover lift + gradient glow + rotating accent */
.icon-btn {
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91, 61, 240, 0.18);
}
.icon-btn:hover::before {
  opacity: 1;
}
.icon-btn:hover > i {
  filter: drop-shadow(0 0 4px rgba(91, 61, 240, 0.5));
}

/* Notification badge: pill shape with smooth pulse */
.icon-btn .badge-num {
  min-width: 22px;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.62rem;
  line-height: 16px;
  background: var(--ny-grad-warm);
  box-shadow:
    0 0 0 2px var(--ny-card),
    0 4px 10px rgba(244, 63, 94, 0.5);
  animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 2px var(--ny-card),
      0 6px 16px rgba(244, 63, 94, 0.7);
  }
}

/* Search input: gradient border on focus, animated shimmer */
.topbar-search input {
  transition: all 0.25s ease;
}
.topbar-search input:focus {
  background: var(--ny-card);
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--ny-primary),
    0 0 0 6px rgba(var(--ny-primary-rgb), 0.12),
    0 8px 24px rgba(91, 61, 240, 0.15);
}
.topbar-search::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, 0.15),
    transparent
  );
  background-size: 200% 100%;
}
.topbar-search:focus-within::after {
  opacity: 1;
  animation: searchShimmer 2.5s linear infinite;
}
@keyframes searchShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* User menu avatar: gradient ring */
.user-menu-btn .avatar {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background:
    linear-gradient(var(--ny-card), var(--ny-card)) padding-box,
    var(--ny-grad-primary) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 12px rgba(91, 61, 240, 0.25);
  transition: all 0.25s ease;
}
.user-menu-btn:hover .avatar {
  transform: scale(1.05);
  box-shadow:
    0 0 0 3px rgba(91, 61, 240, 0.25),
    0 6px 18px rgba(91, 61, 240, 0.4);
}
.user-menu-btn {
  position: relative;
}
.user-menu-btn::after {
  /* small live status dot on avatar (LTR: bottom-right corner of left avatar) */
  content: "";
  position: absolute;
  bottom: 5px;
  left: 38px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ny-success);
  border: 2px solid var(--ny-card);
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.6);
  animation: badgePulse 2.5s ease-in-out infinite;
}
/* RTL: avatar moves to the right side of the button, so mirror the dot */
[dir="rtl"] .user-menu-btn::after {
  left: auto;
  right: 38px;
}

/* Brand mark: subtle glow on hover */
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.1);
  box-shadow:
    0 10px 30px rgba(91, 61, 240, 0.55),
    0 0 24px rgba(34, 211, 238, 0.4);
}
.brand-mark {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Topbar background subtle blur strength bump */
.topbar {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ==========================================================================
   EXTRACTED UTILITIES & PAGE COMPONENT STYLES
   Replaces inline style="..." attributes and inline <style> blocks
   ========================================================================== */

/* ---- Common dimension utilities ---- */
.ny-w-360 {
  width: 360px;
}
.ny-w-420 {
  width: 420px;
}
.ny-w-200 {
  width: 200px;
}
.ny-w-140 {
  width: 140px;
}
.ny-w-120 {
  width: 120px;
}
.ny-w-100 {
  width: 100px;
}
.ny-w-80 {
  width: 80px;
}
.ny-w-60 {
  width: 60px;
}
.ny-w-auto {
  width: auto;
}
.ny-min-h-300 {
  min-height: 300px;
}
.ny-min-h-340 {
  min-height: 340px;
}
.ny-min-h-360 {
  min-height: 360px;
}
.ny-min-h-380 {
  min-height: 380px;
}
.ny-min-h-440 {
  min-height: 440px;
}
.ny-min-h-100 {
  min-height: 100px;
}
.ny-min-h-60 {
  min-height: 60px;
}
.ny-min-h-48 {
  min-height: 48px;
}
.ny-h-30 {
  height: 30px;
}
.ny-h-32 {
  height: 32px;
}
.ny-h-36 {
  height: 36px;
}
.ny-h-50 {
  height: 50px;
}
.ny-h-80 {
  height: 80px;
}
.ny-h-240 {
  height: 240px;
}
.ny-h-300 {
  height: 300px;
}
.ny-h-320 {
  height: 320px;
}
.ny-h-340 {
  height: 340px;
}
.ny-h-380 {
  height: 380px;
}
.ny-h-440 {
  height: 440px;
}
.ny-size-8 {
  width: 8px;
  height: 8px;
}
.ny-size-14 {
  width: 14px;
  height: 14px;
}
.ny-size-16 {
  width: 16px;
  height: 16px;
}
.ny-size-24 {
  width: 24px;
  height: 24px;
}
.ny-size-32 {
  width: 32px;
  height: 32px;
}
.ny-size-36 {
  width: 36px;
  height: 36px;
}
.ny-size-44 {
  width: 44px;
  height: 44px;
}
.ny-size-46 {
  width: 46px;
  height: 46px;
}
.ny-size-48 {
  width: 48px;
  height: 48px;
}
.ny-size-50 {
  width: 50px;
  height: 50px;
}
.ny-size-60 {
  width: 60px;
  height: 60px;
}
.ny-size-64 {
  width: 64px;
  height: 64px;
}
.ny-size-120 {
  width: 120px;
  height: 120px;
}

/* ---- Common positioning ---- */
.ny-pos-rel {
  position: relative;
}
.ny-overflow-hidden {
  position: relative;
  overflow: hidden;
}
.ny-cursor-pointer {
  cursor: pointer;
}
.ny-cursor-text {
  cursor: text;
}
.ny-d-none {
  display: none;
}

/* ---- Common typography sizes ---- */
.ny-fs-60 {
  font-size: 0.6rem;
}
.ny-fs-65 {
  font-size: 0.65rem;
}
.ny-fs-70 {
  font-size: 0.7rem;
}
.ny-fs-72 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.ny-fs-85 {
  font-size: 0.85rem;
}
.ny-fs-11 {
  font-size: 1.1rem;
}
.ny-fs-14 {
  font-size: 1.4rem;
}
.ny-fs-15 {
  font-size: 1.5rem;
}
.ny-fs-16 {
  font-size: 1.6rem;
}
.ny-fs-18 {
  font-size: 1.8rem;
}
.ny-fs-2 {
  font-size: 2rem;
}
.ny-fs-3 {
  font-size: 3rem;
}
.ny-fs-4 {
  font-size: 4rem;
}
.ny-letter-wide {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.ny-uppercase {
  text-transform: uppercase;
}

/* ---- Font family ---- */
.font-mono {
  font-family: "JetBrains Mono", monospace;
}
.letter-spacing {
  letter-spacing: 3px;
}

/* ---- Background utilities ---- */
.ny-bg-hover {
  background: var(--ny-hover);
}
.ny-bg-overlay-dark {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.ny-bg-tint-primary {
  background: rgba(91, 61, 240, 0.04);
}
.ny-bg-tint-primary-2 {
  background: rgba(91, 61, 240, 0.08);
}

/* ---- Color utilities ---- */
.ny-c-primary-var {
  color: var(--ny-primary);
}
.ny-c-orange {
  color: #fb923c;
}
.ny-c-rose {
  color: #f43f5e;
}
.ny-c-violet {
  color: #8b5cf6;
}
.ny-c-cyan {
  color: #22d3ee;
}
.ny-c-amber {
  color: #fbbf24;
}

/* ---- Image overlay (used for gallery / cards) ---- */
.ny-overlay-tr {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
}
.ny-overlay-bl {
  position: absolute;
  bottom: 0.65rem;
  left: 0.65rem;
  right: 0.65rem;
  display: flex;
  justify-content: space-between;
}
.ny-overlay-tag {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* ---- Avatar status dots ---- */
.ny-avatar-status-corner {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--ny-card);
  border-radius: 50%;
}
.ny-avatar-status-center {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid var(--ny-card);
}

/* ---- Customizer offcanvas ---- */
.ny-customizer-wide {
  width: 360px;
}
.cz-span-full {
  grid-column: 1 / -1;
}
.cz-swatch[data-color="#5b3df0"] {
  background: #5b3df0;
}
.cz-swatch[data-color="#0ea5e9"] {
  background: #0ea5e9;
}
.cz-swatch[data-color="#14b8a6"] {
  background: #14b8a6;
}
.cz-swatch[data-color="#22c55e"] {
  background: #22c55e;
}
.cz-swatch[data-color="#f59e0b"] {
  background: #f59e0b;
}
.cz-swatch[data-color="#f43f5e"] {
  background: #f43f5e;
}
.cz-swatch[data-color="#ec4899"] {
  background: #ec4899;
}
.cz-swatch[data-color="#8b5cf6"] {
  background: #8b5cf6;
}

/* ---- Icon library tile (icons-mdi/remix/feather) ---- */
.icon-tile-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--ny-hover);
}
.icon-tile-i {
  font-size: 1.4rem;
  color: var(--ny-primary);
}
.icon-tile-name {
  font-size: 0.85rem;
}

/* ---- Status / pulse dots ---- */
.dot-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  margin-right: 4px;
  vertical-align: middle;
}
.dot-pulse.live {
  background: #22c55e;
  animation: dotPulseAnim 1.4s infinite;
}
@keyframes dotPulseAnim {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

/* ---- Universal icon animations ---- */
.ny-spin,
.mdi-spin,
.rx-spin,
.ftr-spin {
  animation: nyIconRot 1.4s linear infinite;
}
@keyframes nyIconRot {
  to {
    transform: rotate(360deg);
  }
}
.anim-shake,
.rx-shake,
.ftr-shake {
  animation: nyShake 1s ease-in-out infinite;
}
@keyframes nyShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px) rotate(-8deg);
  }
  75% {
    transform: translateX(3px) rotate(8deg);
  }
}
.anim-pulse,
.rx-pulse,
.ftr-pulse {
  animation: nyIPulse 1.2s ease-in-out infinite;
}
@keyframes nyIPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.anim-bounce,
.rx-bounce,
.ftr-bounce {
  animation: nyIBounce 1s ease-in-out infinite;
}
@keyframes nyIBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.anim-rotate,
.rx-rotate,
.ftr-rotate {
  animation: nyIconRot 3s linear infinite;
}
.anim-blink,
.rx-blink,
.ftr-blink {
  animation: nyBlink 1s steps(2) infinite;
}
@keyframes nyBlink {
  50% {
    opacity: 0.2;
  }
}
.anim-float,
.rx-float,
.ftr-float {
  animation: nyIFloat 3s ease-in-out infinite;
}
@keyframes nyIFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.anim-glow,
.rx-glow,
.ftr-glow {
  animation: nyIGlow 1.6s ease-in-out infinite;
}
@keyframes nyIGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 16px currentColor);
  }
}

/* ---- Icon explorer cards (icons-mdi/remix/feather) ---- */
.ix-card,
.rx-card,
.fx-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 10px;
  background: var(--bs-light-bg-subtle);
  position: relative;
  transition: 0.2s;
  text-align: center;
  min-height: 100px;
}
.fx-card {
  padding: 14px 8px;
}
.ix-card:hover,
.rx-card:hover,
.fx-card:hover {
  background: var(--bs-primary-bg-subtle);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(91, 61, 240, 0.15);
}
.ix-card .ix-fav {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.85rem;
  opacity: 0.3;
  cursor: pointer;
  transition: 0.2s;
}
.ix-card:hover .ix-fav {
  opacity: 1;
}
.ix-card .ix-fav.active {
  opacity: 1;
  color: #f59e0b;
}
.ix-card .ix-name,
.rx-card .rx-name,
.fx-card .fx-name {
  font-size: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--bs-secondary-color);
  margin-top: 6px;
  line-height: 1.1;
  word-break: break-all;
}

/* ---- Form-advanced page components ---- */
.ny-img-radio {
  cursor: pointer;
  display: block;
}
.ny-img-radio-card {
  border: 2px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 8px;
  transition: 0.2s;
  text-align: center;
}
.ny-img-radio-card:hover {
  border-color: var(--bs-primary);
}
.ny-img-radio input:checked + .ny-img-radio-card {
  border-color: var(--bs-primary);
  box-shadow: 0 6px 18px rgba(91, 61, 240, 0.2);
  transform: translateY(-2px);
}
.ny-img-radio-preview {
  height: 60px;
  border-radius: 8px;
}
.ny-qty-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qs-val {
  appearance: textfield;
  -moz-appearance: textfield;
}
.qs-val::-webkit-outer-spin-button,
.qs-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ny-star-half {
  display: flex;
  gap: 2px;
  cursor: pointer;
}
.ny-star-half .hs-star {
  font-size: 1rem;
  color: var(--bs-warning);
  position: relative;
}
.tg-pill.active {
  color: #fff !important;
}
.tg-pill[data-cat="frontend"].active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}
.tg-pill[data-cat="backend"].active {
  background: var(--bs-success);
  border-color: var(--bs-success);
}
.tg-pill[data-cat="database"].active {
  background: var(--bs-warning);
  border-color: var(--bs-warning);
}
#dzZone.dragover {
  border-color: var(--bs-primary) !important;
  background: var(--bs-primary-bg-subtle);
}
.lk-opt {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 8px;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lk-opt:hover {
  background: var(--bs-primary-bg-subtle);
}
.lk-opt input {
  margin-bottom: 4px;
}
.lk-opt span {
  font-size: 0.65rem;
  color: var(--bs-secondary-color);
  line-height: 1.1;
}
.lk-opt input:checked + span {
  color: var(--bs-primary);
  font-weight: 600;
}

/* ---- Form-datepicker components ---- */
.tpAmpm.active {
  background: var(--bs-primary);
  color: #fff;
}
.evDay.active {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}
#evRepeat .active {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}
.dateChip.active,
.slotBtn.active {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

/* ---- Form-editor components ---- */
.mdViewPane {
  display: none;
}
#mdPanels.split .mdEditPane,
#mdPanels.split .mdViewPane {
  display: block;
  width: 50%;
}
#mdPanels.view .mdEditPane {
  display: none;
}
#mdPanels.view .mdViewPane {
  display: block;
  width: 100%;
}
#mdPanels.edit .mdEditPane {
  display: block;
  width: 100%;
}
#mdOutput h1,
#mdOutput h2,
#mdOutput h3 {
  font-weight: 700;
  margin-top: 1em;
}
#mdOutput code {
  background: rgba(91, 61, 240, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
}
#mdOutput pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
}
#mdOutput pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
#mdOutput blockquote {
  border-left: 3px solid var(--bs-primary);
  padding-left: 1rem;
  color: var(--bs-secondary-color);
  margin: 1em 0;
}
#mdOutput ul,
#mdOutput ol {
  padding-left: 1.5em;
}
#mdOutput hr {
  margin: 1.5em 0;
}
.cmt-item {
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--bs-light-bg-subtle);
  margin-bottom: 0.5rem;
}
.cmt-item .mention {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}
.tok-keyword {
  color: #c084fc;
}
.tok-string {
  color: #86efac;
}
.tok-number {
  color: #fbbf24;
}
.tok-comment {
  color: #64748b;
  font-style: italic;
}
.tok-fn {
  color: #60a5fa;
}
[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color);
  font-style: italic;
}

/* ---- Form-file-upload components ---- */
.progress-sm {
  height: 6px;
}

/* ---- Form-masks components ---- */
.otp:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(91, 61, 240, 0.25);
}

/* ---- Form-repeater components ---- */
.dr-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-body-bg);
  align-items: center;
  transition: 0.15s;
}
.dr-row.dragging {
  opacity: 0.4;
  transform: rotate(1deg);
}
.dr-row.drag-over {
  border-color: var(--bs-primary);
  border-style: dashed;
}
.dr-handle {
  cursor: grab;
  color: var(--bs-secondary);
}
.dr-handle:active {
  cursor: grabbing;
}
.dr-row.collapsed .dr-details {
  display: none;
}
.tpl-card {
  transition: 0.2s;
}
.tpl-card:hover {
  border-color: var(--bs-primary) !important;
  background: var(--bs-primary-bg-subtle);
}

/* ---- Form-wizard components ---- */
.ob2-step {
  cursor: pointer;
  transition: 0.2s;
}
.ob2-step.active {
  background: var(--bs-primary-bg-subtle);
}
.ob2-step.done div:first-child {
  background: var(--bs-success) !important;
  color: #fff !important;
}
.ob2-card {
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 12px;
  transition: 0.2s;
}
.ob2-card:hover {
  border-color: var(--bs-primary);
}
.ob2-card input {
  display: none;
}
.ob2-card input:checked + div {
  color: var(--bs-primary);
}
.ob2-card:has(input:checked) {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}
.cs-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.cs-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-light);
  color: var(--bs-secondary);
  font-weight: 700;
  font-size: 0.85rem;
}
.cs-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-secondary);
}
.cs-step.active .cs-dot {
  background: var(--bs-primary);
  color: #fff;
}
.cs-step.active .cs-label {
  color: var(--bs-primary);
}
.cs-step.done .cs-dot {
  background: var(--bs-success);
  color: #fff;
}
.cs-line {
  flex-grow: 1;
  height: 2px;
  background: var(--bs-border-color);
  margin-top: 14px;
}
.cs-line.done {
  background: var(--bs-success);
}

/* ---- Tables-basic components ---- */
.exp-row {
  cursor: pointer;
}
.exp-row.expanded .exp-icon {
  transform: rotate(90deg);
}
.exp-icon {
  transition: transform 0.2s;
}
.sortable.asc i {
  transform: rotate(0) !important;
}
.sortable.asc i::before {
  content: "\F0146";
}
.sortable.desc i::before {
  content: "\F0140";
}
.sortable.asc i,
.sortable.desc i {
  color: var(--bs-primary) !important;
}
.hm-cell {
  font-weight: 600;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Tables-datatable components ---- */
.tf-tag.active {
  background: var(--bs-primary) !important;
  color: #fff !important;
}
.col-hidden {
  display: none !important;
}
.grp-header td {
  background: var(--bs-primary-bg-subtle);
  font-weight: 700;
  cursor: pointer;
}

/* ---- Tables-editable components ---- */
.ce-cell {
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.ce-cell:hover {
  background: var(--bs-primary-bg-subtle);
}
.ce-cell.editing {
  padding: 0;
  background: transparent;
}
.ce-cell input,
.ce-cell select {
  border: 2px solid var(--bs-primary);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
  outline: none;
}
.ce-cell input.invalid {
  border-color: var(--bs-danger);
}
.ss-cell {
  padding: 4px;
  min-width: 80px;
}
.ss-cell input {
  border: 0;
  background: transparent;
  width: 100%;
  outline: none;
  padding: 4px 6px;
}
.ss-cell.active {
  background: var(--bs-primary-bg-subtle);
  outline: 2px solid var(--bs-primary);
}
.wf-status {
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  border: 0;
  outline: none;
}

/* ---- Tables-responsive components ---- */
.rc-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  user-select: none;
}
.rc-handle:hover {
  background: var(--bs-primary);
  opacity: 0.5;
}
#stickyTable td:first-child,
#stickyTable th:first-child {
  position: sticky;
  left: 0;
  background: var(--bs-body-bg);
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
#stickyTable thead th:first-child {
  background: var(--bs-light);
}
.md-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  transition: 0.15s;
}
.md-item:hover {
  background: var(--bs-primary-bg-subtle);
}
.md-item.active {
  background: var(--bs-primary-bg-subtle);
  border-left: 3px solid var(--bs-primary);
}
.cc-hide {
  display: none !important;
}

/* ---- Charts extras ---- */
#msFilters .btn:not(.active) {
  opacity: 0.4;
}
.ticker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  transition: 0.15s;
}
.ticker-row:hover {
  background: var(--bs-primary-bg-subtle);
}
.ticker-row:last-child {
  border-bottom: 0;
}
.ticker-sym {
  font-weight: 700;
  width: 60px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
}
.css-bar {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 30px;
}
.css-bar span {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: 0.2s;
}
.spark-cell {
  width: 120px;
  height: 36px;
}

/* ---- Maps-vector overrides ---- */
.jvm-tooltip {
  background: #0f172a !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-family: "Inter", sans-serif;
}
.jvm-marker {
  cursor: pointer;
}

/* ---- Range slider colored progress ---- */
.range-fill {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 99px;
  background: var(--ny-hover);
  outline: none;
}

/* ---- Email page list/scroll ---- */
.mail-list-pane {
  display: flex;
  flex-direction: column;
}
.mail-list-scroll {
  flex: 1;
  overflow-y: auto;
}

/* ---- Additional extracted utilities (pass 2) ---- */
.ny-overlay-tl {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
}
.ny-op-7 {
  opacity: 0.7;
}
.ny-op-85 {
  opacity: 0.85;
}
.ny-op-9 {
  opacity: 0.9;
}
.ny-fs-78 {
  font-size: 0.78rem;
}
.ny-fs-90 {
  font-size: 0.9rem;
}
.ny-fs-12 {
  font-size: 1.2rem;
}
.ny-pre-line {
  white-space: pre-line;
}
.ny-w-16 {
  width: 16px;
}
.ny-w-32 {
  width: 32px;
}
.ny-w-48 {
  width: 48px;
}
.ny-mt-30 {
  margin-top: 30px;
}
.ny-h-prog {
  height: 0.55rem;
}
.ny-min-h-160 {
  min-height: 160px;
}
.ny-min-h-200 {
  min-height: 200px;
}
.ny-min-h-240 {
  min-height: 240px;
}
.ny-min-h-400 {
  min-height: 400px;
}
.ny-min-h-500 {
  min-height: 500px;
}
.ny-cursor-grab {
  cursor: grab;
}
.ny-ls-08 {
  letter-spacing: 0.08em;
}
.ny-rounded-circle {
  border-radius: 50%;
}

/* ---- Additional extracted utilities (pass 3) ---- */
.ny-cursor-help {
  cursor: help;
}
.ny-fs-105 {
  font-size: 1.05rem;
}
.ny-cover-160 {
  width: 100%;
  height: 160px;
  border-radius: 14px;
}
.ny-otp-cell {
  width: 48px;
  height: 56px;
  font-size: 1.5rem;
  font-weight: 700;
}
.ny-otp-cell-sm {
  width: 48px;
  height: 56px;
  font-size: 1.4rem;
}
.ny-otp-cell-md {
  width: 48px;
  height: 56px;
  font-size: 1.5rem;
}
.ny-otp-cell-lg {
  width: 50px;
  height: 60px;
  font-size: 1.5rem;
  font-weight: 700;
}
.ny-feat-ic {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.ny-w-40 {
  width: 40px;
}
.ny-w-50 {
  width: 50px;
}
.ny-w-130 {
  width: 130px;
}
.ny-w-160 {
  width: 160px;
}
.ny-w-180 {
  width: 180px;
}
.ny-w-240 {
  width: 240px;
}
.ny-w-260 {
  width: 260px;
}
.ny-min-w-120 {
  min-width: 120px;
}
.ny-min-w-140 {
  min-width: 140px;
}
.ny-min-w-160 {
  min-width: 160px;
}
.ny-min-w-180 {
  min-width: 180px;
}
.ny-min-w-200 {
  min-width: 200px;
}
.ny-min-w-240 {
  min-width: 240px;
}
.ny-z-10 {
  z-index: 10;
}
.ny-z-20 {
  z-index: 20;
}
.ny-scroll-200 {
  max-height: 200px;
  overflow-y: auto;
}
.ny-scroll-240 {
  max-height: 240px;
  overflow-y: auto;
}
.ny-scroll-260 {
  max-height: 260px;
  overflow-y: auto;
}
.ny-scroll-280 {
  max-height: 280px;
  overflow-y: auto;
}
.ny-scroll-300 {
  max-height: 300px;
  overflow-y: auto;
}
.ny-scroll-340 {
  max-height: 340px;
  overflow-y: auto;
}
.ny-scroll-400 {
  max-height: 400px;
  overflow-y: auto;
}
.ny-scroll-500 {
  max-height: 500px;
  overflow-y: auto;
}

/* ---- Additional extracted utilities (pass 4) ---- */
.ny-label-cap {
  opacity: 0.85;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ny-btn-glass {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 0;
}
.ny-input-glass {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}
.ny-display-h {
  font-family: "Plus Jakarta Sans";
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ny-heading);
}
.ny-z-rel-1 {
  position: relative;
  z-index: 1;
}
.ny-tile-glass {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.5rem;
  border-radius: 10px;
}
.ny-spark-h {
  height: 50px;
  margin-top: 0.5rem;
}
.ny-h-90 {
  height: 90px;
}
.ny-h-120 {
  height: 120px;
}
.ny-h-180 {
  height: 180px;
}
.ny-h-200 {
  height: 200px;
}
.ny-h-220 {
  height: 220px;
}
.ny-fs-22 {
  font-size: 2.2rem;
}
.ny-fs-25 {
  font-size: 2.5rem;
}
.ny-num-cell {
  font-size: 1.5rem;
  min-width: 32px;
}
.ny-num-display {
  font-size: 1.4rem;
  font-family: "Plus Jakarta Sans";
  letter-spacing: -0.02em;
}
.ny-circle-60 {
  width: 60px;
  height: 60px;
  font-size: 1.8rem;
}
.ny-tile-52 {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.ny-tile-42 {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ny-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ny-size-32-fs {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.ny-lh-1 {
  line-height: 1;
}
.ny-lh-11 {
  line-height: 1.1;
}
.ny-lh-16 {
  line-height: 1.6;
}

/* ---- Additional extracted utilities (pass 5) ---- */
/* Percentage widths (mock data / progress) */
.w-p-0 {
  width: 0%;
}
.w-p-2 {
  width: 2%;
}
.w-p-8 {
  width: 8%;
}
.w-p-14 {
  width: 14%;
}
.w-p-18 {
  width: 18%;
}
.w-p-22 {
  width: 22%;
}
.w-p-25 {
  width: 25%;
}
.w-p-42 {
  width: 42%;
}
.w-p-55 {
  width: 55%;
}
.w-p-60 {
  width: 60%;
}
.w-p-64 {
  width: 64%;
}
.w-p-68 {
  width: 68%;
}
.w-p-75 {
  width: 75%;
}
.w-p-78 {
  width: 78%;
}
.w-p-92 {
  width: 92%;
}
.w-p-100 {
  width: 100%;
}

/* Object fit */
.ny-obj-cover {
  object-fit: cover;
}

/* Min widths */
.ny-min-w-50 {
  min-width: 50px;
}
.ny-min-w-60 {
  min-width: 60px;
}
.ny-min-w-48-tr {
  min-width: 48px;
  text-align: right;
}
.ny-w-64-tr {
  width: 64px;
  text-align: right;
}

/* Small heights */
.ny-h-half {
  height: 0.5rem;
}
.ny-h-prog2 {
  height: 0.6rem;
}
.ny-h-12 {
  height: 1.2rem;
}
.ny-h-16 {
  height: 1.6rem;
}
.ny-h-4 {
  height: 4px;
}
.ny-h-40 {
  height: 40px;
}
.ny-track-4 {
  height: 4px;
  border-radius: 2px;
  background: var(--ny-hover);
}

/* Common font sizes */
.ny-fs-13 {
  font-size: 1.3rem;
}
.ny-fs-115 {
  font-size: 1.15rem;
}
.ny-fs-62 {
  font-size: 0.62rem;
}
.ny-fs-35 {
  font-size: 3.5rem;
}

/* Specific colors */
.ny-c-google-red {
  color: #ea4335;
}
.ny-c-slate-300 {
  color: #cbd5e1;
}
.ny-c-slate-200 {
  color: #e2e8f0;
}

/* Glass / overlay backgrounds (used on auth pages) */
.ny-bg-glass-20 {
  background: rgba(255, 255, 255, 0.2);
}
.ny-btn-glass-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0;
}
.ny-tile-glass-light {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem;
}
.ny-tile-glass-12 {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.2rem;
  border-radius: 8px;
}
.ny-bg-hover-body {
  background: var(--ny-hover);
  color: var(--ny-body);
}

/* Composite shapes */
.ny-pill-64-22 {
  width: 64px;
  height: 22px;
  border-radius: 6px;
}
.ny-pill-50-20 {
  width: 50px;
  height: 20px;
  border-radius: 8px;
}
.ny-pill-64-30 {
  width: 64px;
  height: 30px;
  border-radius: 99px;
}
.ny-tile-52-r14 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.ny-tile-30 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.ny-img-42 {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}
.ny-img-44 {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.ny-img-160 {
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
}
.ny-img-260 {
  height: 260px;
  object-fit: cover;
}
.ny-size-42 {
  width: 42px;
  height: 42px;
}
.ny-size-38-fs {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
}
.ny-w-54 {
  width: 54px;
}
.ny-w-12 {
  width: 12px;
}
.ny-w-90 {
  width: 90px;
}

/* Max-widths */
.ny-mw-none {
  max-width: none;
}
.ny-mw-560-center {
  max-width: 560px;
  margin: 0 auto;
}
.ny-mw-540-rel {
  max-width: 540px;
  position: relative;
}
.ny-mw-240 {
  max-width: 240px;
}
.ny-mh-200 {
  max-height: 200px;
}

/* Positioning */
.ny-top-90 {
  top: 90px;
}
.ny-rel-iblock {
  position: relative;
  display: inline-block;
}
.ny-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7));
}

/* Opacity */
.ny-op-5 {
  opacity: 0.5;
}
.ny-op-6 {
  opacity: 0.6;
}
.ny-op-8-fs-65 {
  opacity: 0.8;
  font-size: 0.65rem;
}
.ny-op-8-fs-62 {
  opacity: 0.8;
  font-size: 0.62rem;
}
.ny-strike-60 {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Letter spacing combos */
.ny-ls-fs-68 {
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}
.ny-ls-fs-66 {
  letter-spacing: 0.06em;
  font-size: 0.66rem;
}

/* Display sizes */
.ny-display-25 {
  font-size: 2.5rem;
  font-family: "Plus Jakarta Sans";
}
.ny-display-22 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

/* Labels */
.ny-label-muted {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ny-muted);
}

/* Wizard / circle */
.ny-mini-140 {
  min-height: 140px;
  background: var(--ny-hover);
  border-radius: 10px;
  padding: 0.5rem;
}
.ny-wiz-circle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--ny-hover);
  color: var(--ny-muted);
  border: 2px solid var(--ny-border);
}
.ny-circle-100 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Icon tiles (gradient soft) */
.ny-tile-48-primary {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(91, 61, 240, 0.12);
  color: var(--ny-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ny-tile-42-primary {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ny-primary-soft);
  color: var(--ny-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ny-tile-48 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Dual-range slider overlay (form-advanced) */
.ny-slider-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  background: transparent;
  -webkit-appearance: none;
  height: 40px;
  z-index: 2;
}

/* ---- Additional extracted utilities (pass 6) ---- */
/* More percentage widths */
.w-p-6 {
  width: 6%;
}
.w-p-10 {
  width: 10%;
}
.w-p-15 {
  width: 15%;
}
.w-p-20 {
  width: 20%;
}
.w-p-35 {
  width: 35%;
}
.w-p-40 {
  width: 40%;
}
.w-p-45 {
  width: 45%;
}
.w-p-50 {
  width: 50%;
}
.w-p-58 {
  width: 58%;
}
.w-p-71 {
  width: 71%;
}
.w-p-77 {
  width: 77%;
}
.w-p-82 {
  width: 82%;
}
.w-p-88 {
  width: 88%;
}
.w-p-96 {
  width: 96%;
}
.w-p-42-white {
  width: 42%;
  background: #fff;
}

/* Hover link soft */
.ny-link-soft {
  color: #cbd5e1;
  transition: color 0.15s;
}
.ny-link-soft:hover {
  color: #fff;
}

/* Status/icon tile colored variants */
.ny-tile-48-warning {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.12);
  color: var(--ny-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ny-tile-48-info {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(14, 165, 233, 0.12);
  color: var(--ny-info);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ny-tile-38-warning {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--ny-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ny-tile-38-danger {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(244, 63, 94, 0.12);
  color: var(--ny-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ny-tile-38-success {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--ny-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Status backgrounds */
.ny-bg-warning-w {
  background: var(--ny-warning);
  color: #fff;
}
.ny-bg-success-w {
  background: var(--ny-success);
  color: #fff;
}
.ny-bg-danger-w {
  background: var(--ny-danger);
  color: #fff;
}
.ny-bg-warning {
  background: var(--ny-warning);
}
.ny-bg-success {
  background: var(--ny-success);
}
.ny-bg-primary {
  background: var(--ny-primary);
}
.ny-bg-black {
  background: #000;
}
.ny-btn-amber-grad {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #000;
  border: 0;
}

/* Wizard line / accents */
.ny-wiz-line {
  flex: 0 0 60px;
  height: 2px;
  margin-top: 22px;
  background: var(--ny-border);
}
.ny-bt-primary {
  border-top: 4px solid var(--ny-primary);
}

/* Z-index */
.ny-z-1 {
  z-index: 1;
}
.ny-z-2 {
  z-index: 2;
}

/* Position presets */
.ny-pos-tr-1 {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.ny-table-fixed {
  table-layout: fixed;
}

/* Sizes */
.ny-size-56 {
  width: 56px;
  height: 56px;
}
.ny-pill-80 {
  width: 80px;
  height: 32px;
  border-radius: 99px;
}
.ny-rect-120 {
  width: 120px;
  height: 38px;
  border-radius: 10px;
}
.ny-rect-42 {
  width: 100%;
  height: 42px;
  border-radius: 10px;
}
.ny-progress-100 {
  width: 100px;
  height: 0.6rem;
  margin: 0;
}
.ny-cell-40 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.ny-img-40 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}
.ny-circle-50 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ny-circle-110 {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ny-w-60-tc {
  width: 60px;
  text-align: center;
}

/* Font sizes */
.ny-fs-15-cell {
  font-size: 1.5rem;
  width: 32px;
  text-align: center;
}
.ny-fs-145 {
  font-size: 1.45rem;
}
.ny-fs-125 {
  font-size: 1.25rem;
}
.ny-fs-70-ls {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.ny-fs-50 {
  font-size: 0.5rem;
}

/* Decorative blobs (auth/dashboard backgrounds) */
.ny-blob-tl-180 {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.ny-blob-tr-180 {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.ny-blob-br-200 {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.ny-blob-tr-140 {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.12), transparent 70%);
}

/* Strip gradients (top of cards) */
.ny-strip-amber-rose {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #f43f5e);
}
.ny-strip-gold {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f97316, #fbbf24);
}

/* Range track base */
.ny-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 4px;
  background: var(--bs-border-color);
  border-radius: 2px;
}

/* Cover image caption */
.ny-cover-caption {
  bottom: 2rem;
  left: 2rem;
  right: auto;
  max-width: 60%;
}

/* Pulse dot accent */
.ny-dot-pulse-rose {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
  animation: badgePulse 1.5s ease-in-out infinite;
}

/* ---- Additional extracted utilities (pass 7) ---- */
/* Border-top accents */
.ny-bt-warning {
  border-top: 4px solid var(--ny-warning);
}
.ny-bt-success {
  border-top: 4px solid var(--ny-success);
}
.ny-bt-info {
  border-top: 4px solid var(--ny-info);
}

/* Background tints */
.ny-bg-info-w {
  background: var(--ny-info);
  color: #fff;
}
.ny-bg-hover-body-tr {
  background: var(--ny-hover);
  color: var(--ny-body);
  transition: all 0.2s;
}
.ny-bg-hover-noborder {
  background: var(--ny-hover);
  border: 0;
}
.ny-bg-primary-12 {
  background: rgba(91, 61, 240, 0.12);
  color: var(--ny-primary);
}
.ny-badge-glass-15 {
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  font-weight: 700;
}
.ny-badge-amber-18 {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  font-weight: 800;
}
.ny-badge-rose-12 {
  background: rgba(244, 63, 94, 0.12);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Borders */
.ny-border {
  border: 1px solid var(--ny-border);
}
.ny-border-glass-3 {
  border: 3px solid rgba(255, 255, 255, 0.4);
}
.ny-bc-slate-800 {
  border-color: #1e293b;
}

/* Font sizes */
.ny-fs-5 {
  font-size: 5rem;
}
.ny-fs-24-lh {
  font-size: 2.4rem;
  line-height: 1.15;
}
.ny-fs-24-amber {
  font-size: 2.4rem;
  color: #fbbf24;
}
.ny-fs-18-op85 {
  font-size: 1.8rem;
  opacity: 0.85;
}
.ny-fs-18-op7 {
  font-size: 1.8rem;
  opacity: 0.7;
}
.ny-fs-18-self {
  font-size: 1.8rem;
  align-self: center;
}
.ny-fs-16-lh {
  font-size: 1.6rem;
  line-height: 1;
}
.ny-fs-15-clk {
  font-size: 1.5rem;
  cursor: pointer;
}
.ny-fs-12-op85 {
  font-size: 1.2rem;
  opacity: 0.85;
}
.ny-fs-80 {
  font-size: 0.8rem;
}
.ny-fs-55 {
  font-size: 0.55rem;
}
.ny-display-2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.ny-display-h-white {
  font-family: "Plus Jakarta Sans";
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
}

/* Misc */
.ny-pe-none {
  pointer-events: none;
}
.ny-input-bare-120 {
  outline: none;
  background: transparent;
  min-width: 120px;
}
.ny-min-w-280 {
  min-width: 280px;
}
.ny-tag-input {
  min-height: 48px;
  cursor: text;
}
.ny-min-h-320 {
  min-height: 320px;
}
.ny-min-h-280 {
  min-height: 280px;
}
.ny-mw-420 {
  max-width: 420px;
}
.ny-mw-260 {
  max-width: 260px;
}
.ny-mw-100-mh-75 {
  max-width: 100%;
  max-height: 75vh;
}
.ny-mt-60 {
  margin-top: 60px;
}
.ny-card-banner {
  height: 60px;
  background: linear-gradient(135deg, #5b3df033, #5b3df011);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.ny-search-42 {
  height: 42px;
  padding-left: 2.6rem;
}
.ny-search-36 {
  height: 36px;
  padding-left: 2.4rem;
}
.ny-map-320 {
  height: 320px;
  border-radius: 12px;
  background: var(--bs-light-bg-subtle);
}
.ny-h-30vh {
  height: 30vh;
}
.ny-h-240 {
  height: 240px;
}
.ny-invert {
  filter: invert(1);
}
.ny-d-none-imp {
  display: none !important;
}

/* ==========================================================================
   AUTO-EXTRACTED REMAINING INLINE STYLES (one class per unique style)
   ========================================================================== */

.sx-796deb17 {
  --bs-pagination-active-bg: var(--ny-danger);
  --bs-pagination-active-border-color: var(--ny-danger);
}
.sx-0f52d8d9 {
  --bs-pagination-active-bg: var(--ny-success);
  --bs-pagination-active-border-color: var(--ny-success);
}
.sx-e111242c {
  --bs-pagination-active-bg: var(--ny-warning);
  --bs-pagination-active-border-color: var(--ny-warning);
}
.sx-54c4de87 {
  --bs-pagination-color: #cbd5e1;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-pagination-active-bg: #fbbf24;
  --bs-pagination-active-border-color: #fbbf24;
}
.sx-2344d62e {
  aspect-ratio: 1;
  cursor: pointer;
}
.sx-d7c4f9a5 {
  background: #000;
  border: 0;
}
.sx-200df320 {
  background: #000;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.sx-e2e29a0a {
  background: #0a66c2;
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  border: 0;
}
.sx-e73ac141 {
  background: #0f172a;
  border-color: #1e293b;
  color: #fff;
  min-width: 240px;
}
.sx-fc717d9d {
  background: #0f172a;
  color: #e2e8f0;
  min-height: 240px;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow: auto;
}
.sx-d4e03f35 {
  background: #0f172a;
  color: #fff;
}
.sx-2ed51582 {
  background: #0f172a;
  color: #fff;
  border: 0;
}
.sx-aa9a4adb {
  background: #0f172a;
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sx-3ca93d50 {
  background: #0f172a;
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sx-be07d5c3 {
  background: #14b8a6;
}
.sx-86b6058d {
  background: #14b8a6;
  color: #fff;
}
.sx-cb2ff00d {
  background: #1877f2;
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  border: 0;
}
.sx-26d1208e {
  background: #1da1f2;
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  border: 0;
}
.sx-f5a731a3 {
  background: #22d3ee;
}
.sx-cbfa2b3a {
  background: #22d3ee;
  color: #fff;
}
.sx-8593d7bf {
  background: #25d366;
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  border: 0;
}
.sx-8234ae76 {
  background: #475569;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.sx-988be308 {
  background: #5b3df0;
}
.sx-0f10bd70 {
  background: #5b3df0;
  color: #fff;
}
.sx-72be4b4b {
  background: #94a3b8;
}
.sx-a8d2bb57 {
  background: #94a3b8;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.sx-c1345e8a {
  background: #cbd5e1;
}
.sx-76f9108e {
  background: #d97706;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.sx-6c43c613 {
  background: #f43f5e;
}
.sx-8f77cf3c {
  background: #f43f5e;
  color: #fff;
}
.sx-a76e943b {
  background: #f59e0b;
}
.sx-cd7ad4d9 {
  background: #f59e0b;
  color: #fff;
}
.sx-fc997705 {
  background: #fbbf24;
  color: #000;
  border: 0;
}
.sx-a35c5ebe {
  background: #fbbf24;
  color: #000;
  font-weight: 800;
}
.sx-c377311c {
  background: #fbbf24;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.sx-2db5349b {
  background: #fff;
  color: #0f172a;
  border: 0;
  width: 48px;
  height: 48px;
}
.sx-8a61a095 {
  background: #fff;
  color: var(--ny-primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  position: relative;
  border: 0;
}
.sx-78560e4d {
  background: #fff;
  color: var(--ny-primary);
  font-weight: 700;
}
.sx-92051b9a {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
}
.sx-e143c8e9 {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
}
.sx-a8ba5c55 {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sx-11000bf8 {
  background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 50%, #5b3df0 100%);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sx-fa89f8ac {
  background: linear-gradient(135deg, #1877f2, #0d5fc4);
  color: #fff;
  border: 0;
}
.sx-49fba60c {
  background: linear-gradient(135deg, #1da1f2, #0084d4);
  color: #fff;
  border: 0;
}
.sx-8676dc2d {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  border: 0;
}
.sx-1f84a665 {
  background: linear-gradient(135deg, #22c55e, #14b8a6);
}
.sx-4505e860 {
  background: linear-gradient(135deg, #5b3df0 0%, #22d3ee 100%);
}
.sx-b5db83d7 {
  background: linear-gradient(135deg, #5b3df0 0%, #8b5cf6 50%, #22d3ee 100%);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sx-535417fd {
  background: linear-gradient(135deg, #5b3df0 0%, #8b5cf6 50%, #f43f5e 100%);
}
.sx-88d93bec {
  background: linear-gradient(135deg, #5b3df0, #22d3ee);
}
.sx-db41cffc {
  background: linear-gradient(135deg, #5b3df0, #22d3ee);
  min-height: 200px;
  box-shadow: 0 14px 30px rgba(91, 61, 240, 0.3);
}
.sx-f63948df {
  background: linear-gradient(135deg, #5b3df0, #8b5cf6);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sx-1fddc217 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
.sx-2af99bad {
  background: linear-gradient(135deg, #e1306c, #c13584);
  color: #fff;
  border: 0;
}
.sx-0d587cb3 {
  background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
}
.sx-b4c13aaa {
  background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
}
.sx-b9d87eb0 {
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
}
.sx-833b74f5 {
  background: linear-gradient(135deg, #fb7185, #f43f5e);
}
.sx-9231ea14 {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #0f172a;
  border: 0;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.3);
}
.sx-bf49e2ed {
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  color: #fff;
  border: 0;
}
.sx-61bc6d08 {
  background: linear-gradient(135deg, #ff0000, #c4302b);
  color: #fff;
  border: 0;
}
.sx-670d0c23 {
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.06),
    rgba(14, 165, 233, 0.08)
  );
  border: 1px solid rgba(20, 184, 166, 0.15);
}
.sx-caf6e56e {
  background: linear-gradient(
    135deg,
    rgba(91, 61, 240, 0.06),
    rgba(34, 211, 238, 0.06)
  );
  border: 0;
}
.sx-fd0ed0ad {
  background: linear-gradient(
    135deg,
    rgba(91, 61, 240, 0.06),
    rgba(34, 211, 238, 0.06)
  );
  margin: -0.5rem -0.5rem 0.5rem;
}
.sx-78fa1c86 {
  background: linear-gradient(
    135deg,
    rgba(91, 61, 240, 0.08),
    rgba(34, 211, 238, 0.08)
  );
}
.sx-7a3e70a9 {
  background: linear-gradient(90deg, #0ea5e9, #fbbf24, #f43f5e);
  border-radius: 99px;
}
.sx-a1d7d5d3 {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  color: #0f172a;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}
.sx-8bac3083 {
  background: linear-gradient(
    90deg,
    rgba(91, 61, 240, 0.04),
    rgba(34, 211, 238, 0.04)
  );
}
.sx-8ed2e0dc {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.sx-41809dbc {
  background:
    radial-gradient(
      circle at 30% 40%,
      rgba(91, 61, 240, 0.06),
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(34, 211, 238, 0.06),
      transparent 60%
    );
}
.sx-4353ff19 {
  background: radial-gradient(
    circle at top,
    rgba(20, 184, 166, 0.12),
    transparent 60%
  );
}
.sx-3040b8ae {
  background: rgba(0, 0, 0, 0.7);
}
.sx-cd67bc3b {
  background: rgba(14, 165, 233, 0.12);
  color: var(--ny-info);
}
.sx-964d0379 {
  background: rgba(20, 184, 166, 0.08);
  color: var(--ny-success);
  font-size: 0.82rem;
}
.sx-ca7699f5 {
  background: rgba(20, 184, 166, 0.12);
  color: var(--ny-success);
}
.sx-dded6639 {
  background: rgba(20, 184, 166, 0.14);
  border: 0;
  border-radius: 14px;
  padding: 0.85rem;
}
.sx-a89acc48 {
  background: rgba(20, 184, 166, 0.15);
}
.sx-d92e395c {
  background: rgba(244, 63, 94, 0.1);
  border: 0;
  border-radius: 14px;
  padding: 0.85rem;
}
.sx-6e354a09 {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
}
.sx-5b34d2c9 {
  background: rgba(244, 63, 94, 0.12);
  color: var(--ny-danger);
}
.sx-4abe544f {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.sx-8b84951e {
  background: rgba(245, 158, 11, 0.12);
  color: var(--ny-warning);
}
.sx-854151b8 {
  background: rgba(245, 158, 11, 0.14);
  border: 0;
  border-radius: 14px;
  padding: 0.85rem;
}
.sx-68f945b4 {
  background: rgba(245, 158, 11, 0.14);
  font-size: 0.68rem;
  font-weight: 800;
}
.sx-4df214d1 {
  background: rgba(245, 158, 11, 0.14);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sx-442f36ad {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.sx-9de67268 {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 0;
}
.sx-47c4e39e {
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  color: #fff;
  font-weight: 600;
}
.sx-bdc1d9f6 {
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  color: #fff;
  font-weight: 600;
  width: auto;
}
.sx-5d0117e2 {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sx-348053af {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
}
.sx-9590a691 {
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
  font-weight: 800;
}
.sx-e91565fd {
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sx-617d8870 {
  background: rgba(255, 255, 255, 0.25);
  height: 6px;
}
.sx-425b32ad {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.sx-7d135967 {
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
}
.sx-daac1408 {
  background: rgba(91, 61, 240, 0.08);
  font-weight: 800;
  color: var(--ny-primary);
}
.sx-f6dea1e4 {
  background: rgba(91, 61, 240, 0.12);
  border: 0;
  border-radius: 14px;
  padding: 0.85rem;
}
.sx-1c669228 {
  background: rgba(91, 61, 240, 0.12);
  color: #5b3df0;
}
.sx-59f225b6 {
  background: transparent;
  border: 1px solid var(--ny-danger);
  color: var(--ny-danger);
}
.sx-fb066ac4 {
  background: transparent;
  border: 1px solid var(--ny-primary);
  color: var(--ny-primary);
}
.sx-40db40b9 {
  background: transparent;
  border: 1px solid var(--ny-success);
  color: var(--ny-success);
}
.sx-50d96b6c {
  background: transparent;
  color: transparent;
  caret-color: #fff;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: none;
  outline: none;
}
.sx-f8760591 {
  background: transparent;
  color: var(--ny-body);
}
.sx-e85ecfb8 {
  background: var(--bs-body-bg);
}
.sx-d8158852 {
  background: var(--bs-light);
}
.sx-57348080 {
  background: var(--bs-light);
  text-align: center;
  font-weight: 600;
}
.sx-3a78925f {
  background: var(--bs-primary-bg-subtle);
}
.sx-75cc121d {
  background: var(--ny-danger);
}
.sx-d8b2d8d8 {
  background: var(--ny-grad-cool);
}
.sx-d35a01e4 {
  background: var(--ny-grad-mint);
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  border-radius: 8px;
}
.sx-46c67879 {
  background: var(--ny-grad-primary) !important;
}
.sx-70446ce0 {
  background: var(--ny-grad-primary);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.sx-f86a897c {
  background: var(--ny-grad-primary);
  color: #fff;
  border: 0;
}
.sx-a02be84d {
  background: var(--ny-hover);
  color: var(--ny-muted);
  box-shadow: none;
}
.sx-a768243c {
  background: var(--ny-hover);
  padding: 1.25rem;
  border-radius: 0 0 0 14px;
}
.sx-cbb87c2c {
  background: var(--ny-hover);
  padding: 1.5rem;
  border-radius: 14px 0 0 14px;
}
.sx-f346fc37 {
  background: var(--ny-info);
}
.sx-678d722a {
  background: var(--ny-primary);
  color: #fff;
  border: 0;
}
.sx-ef55d6f8 {
  background: var(--ny-success);
  color: #fff;
  border: 0;
}
.sx-4582b40b {
  border-color: rgba(255, 255, 255, 0.18);
}
.sx-edff7786 {
  border-color: rgba(255, 255, 255, 0.2);
}
.sx-a5e1d70b {
  border-left: 3px solid var(--ny-danger);
  padding-left: 0.75rem;
  flex: 1;
}
.sx-ea4d715e {
  border-left: 3px solid var(--ny-primary);
  padding-left: 0.75rem;
  flex: 1;
}
.sx-36849a6c {
  border-left: 3px solid var(--ny-success);
  padding-left: 0.75rem;
  flex: 1;
}
.sx-8b56bbc2 {
  border-left: 3px solid var(--ny-warning);
  padding-left: 0.75rem;
  flex: 1;
}
.sx-65eff076 {
  border: 0;
  background: transparent;
  padding-left: 0;
}
.sx-4ece67d7 {
  border: 0;
  font-size: 1.6rem;
  font-weight: 700;
}
.sx-df5fcca3 {
  border: 1.5px solid var(--ny-danger);
  color: var(--ny-danger);
  background: transparent;
}
.sx-1a095df6 {
  border: 1.5px solid var(--ny-info);
  color: var(--ny-info);
  background: transparent;
}
.sx-9d0b6d14 {
  border: 1.5px solid var(--ny-success);
  color: var(--ny-success);
  background: transparent;
}
.sx-81302769 {
  border: 1.5px solid var(--ny-warning);
  color: var(--ny-warning);
  background: transparent;
}
.sx-39eb0f4e {
  border: 2px dashed var(--bs-border-color);
  cursor: pointer;
  transition: 0.2s;
}
.sx-4cddebb0 {
  border: 2px dashed var(--bs-border-color);
  transition: 0.2s;
}
.sx-d1e695c4 {
  border: 2px dashed var(--ny-border);
  border-radius: 14px;
  padding: 3rem 1rem;
  text-align: center;
  background: var(--ny-hover);
  cursor: pointer;
  transition: all 0.2s;
}
.sx-e4d29a27 {
  border: 3px solid rgba(251, 191, 36, 0.5);
}
.sx-860f414a {
  border: 4px dashed var(--ny-primary);
}
.sx-4e454fec {
  border: 4px solid var(--ny-card);
}
.sx-b6975228 {
  border: 4px solid var(--ny-success);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2);
}
.sx-fecd5fdf {
  border: 5px solid var(--ny-card);
  box-shadow: var(--ny-shadow-sm);
}
.sx-226f0f59 {
  color: #1877f2;
}
.sx-bc9dc2e8 {
  color: #cbd5e1;
  font-size: 0.7rem;
  margin-top: 2px;
}
.sx-b2f1bf96 {
  color: rgba(255, 255, 255, 0.6);
}
.sx-0af32eca {
  color: rgba(255, 255, 255, 0.7);
}
.sx-a3569fb1 {
  color: rgba(255, 255, 255, 0.75);
}
.sx-a4c1be69 {
  cursor: pointer;
  user-select: none;
}
.sx-00d0b7dc {
  cursor: text;
  min-height: 24px;
}
.sx-4081ab25 {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 160px;
}
.sx-16cc484e {
  display: inline-flex;
}
.sx-aea914c2 {
  display: none;
  max-height: 160px;
  overflow: auto;
  font-size: 0.75rem;
}
.sx-bc5d6802 {
  display: none;
  max-height: 240px;
  background: #000;
}
.sx-844fb427 {
  display: none;
  opacity: 0.9;
}
.sx-2c845812 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}
.sx-5f20c1e8 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
}
.sx-8fda5694 {
  display: none;
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
  min-width: 240px;
}
.sx-1bb41444 {
  display: none;
  z-index: 20;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
}
.sx-d26a9463 {
  filter: brightness(1.4) contrast(1.1);
}
.sx-a4e50d39 {
  filter: hue-rotate(80deg) saturate(150%);
}
.sx-06c1404e {
  filter: sepia(80%);
}
.sx-55c7621d {
  flex: 0 0 50px;
  height: 2px;
  background: var(--ny-border);
  margin-top: 20px;
}
.sx-88d6bfa5 {
  flex: 0 0 50px;
  height: 2px;
  background: var(--ny-primary);
  margin-top: 20px;
}
.sx-db6e44c2 {
  flex: 1;
  height: 45%;
}
.sx-5eb097a5 {
  flex: 1;
  height: 55%;
}
.sx-8bf49351 {
  flex: 1;
  height: 60%;
}
.sx-9951daf1 {
  flex: 1;
  height: 65%;
}
.sx-046e1d6e {
  flex: 1;
  height: 70%;
}
.sx-a193e6ec {
  flex: 1;
  height: 75%;
}
.sx-252c900b {
  flex: 1;
  height: 85%;
}
.sx-c9cf1c1a {
  flex: 1;
  height: 90%;
}
.sx-6e74602f {
  flex: 1;
  overflow-y: auto;
  max-height: 65vh;
}
.sx-640fb1f6 {
  font-size: 0.75rem;
}
.sx-07d861d5 {
  font-size: 0.75rem;
  max-height: 120px;
  overflow: auto;
}
.sx-2e6b7426 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.sx-c64ca98f {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ny-success);
}
.sx-0de4e77b {
  font-size: 0.82rem;
}
.sx-8b32b0f6 {
  font-size: 0.85rem;
  padding: 0.5rem 0.85rem;
}
.sx-f8930d7c {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ny-muted);
}
.sx-9e8d8ad2 {
  font-size: 1.1rem;
  opacity: 0.8;
}
.sx-81f1eb39 {
  font-size: 1.5rem;
  color: #fbbf24;
}
.sx-a3862bf6 {
  font-size: 1.5rem;
  opacity: 0.85;
}
.sx-fbae1a89 {
  font-size: 1.8rem;
  letter-spacing: 0.25rem;
  cursor: pointer;
}
.sx-342031af {
  font-size: 1.8rem;
  opacity: 0.95;
}
.sx-fd91441e {
  font-size: 1rem;
}
.sx-85377011 {
  font-size: 1rem;
  line-height: 1.7;
}
.sx-05d077f7 {
  font-size: 1rem;
  opacity: 0.85;
}
.sx-c881c176 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: "Plus Jakarta Sans";
}
.sx-4ef0b9bd {
  font-size: 2.4rem;
}
.sx-6f075203 {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
}
.sx-3fea4a7a {
  font-size: 2.4rem;
  line-height: 1;
}
.sx-e20126d4 {
  font-size: 2.5rem;
  cursor: pointer;
}
.sx-77757af2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.sx-c50fee8e {
  font-size: 2.5rem;
  margin-left: 4px;
}
.sx-4aa0de57 {
  font-size: 2rem;
  color: #fbbf24;
}
.sx-9180f393 {
  font-size: 2rem;
  color: var(--ny-primary);
}
.sx-9737b7e3 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.sx-f52084cd {
  font-size: 3.5rem;
  line-height: 1;
}
.sx-116171ab {
  font-size: 3rem;
  color: #fff;
}
.sx-c16329cb {
  font-size: 3rem;
  color: var(--ny-primary);
}
.sx-3c6b844d {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.sx-da0036f4 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  font-family: "Plus Jakarta Sans";
}
.sx-b89c10b6 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.sx-23208a71 {
  font-size: 3rem;
  opacity: 0.85;
}
.sx-0b449daa {
  font-size: 4rem;
  opacity: 0.3;
}
.sx-0eb69605 {
  font-size: 4rem;
  opacity: 0.75;
}
.sx-8d868518 {
  font-size: 4rem;
  opacity: 0.85;
}
.sx-83e4487b {
  font-weight: 700;
}
.sx-53ebd905 {
  font-weight: 700;
  color: #fff;
}
.sx-e98e59a1 {
  height: 100px;
}
.sx-7acd0bba {
  height: 140px;
  background: linear-gradient(135deg, #5b3df0, #8b5cf6, #22d3ee);
  position: relative;
}
.sx-949a3873 {
  height: 18px;
}
.sx-3b36a7e4 {
  height: 30px;
}
.sx-7167f81a {
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
}
.sx-665ae22a {
  height: 380px;
  border-radius: 12px;
  background: var(--bs-light-bg-subtle);
}
.sx-b1854ddb {
  height: 38px;
  padding-left: 2.4rem;
}
.sx-4804843b {
  height: 40px;
  padding-left: 2.4rem;
}
.sx-9870dfaa {
  height: 440px;
  border-radius: 12px;
  background: var(--bs-light-bg-subtle);
}
.sx-e335b5cb {
  height: 48px;
  padding-left: 2.6rem;
  font-size: 1rem;
}
.sx-f1da5eb6 {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.sx-2eba01f9 {
  height: 4px;
  border-radius: 2px;
  background: #0ea5e9;
  margin-bottom: 0.65rem;
}
.sx-0c92ed4b {
  height: 4px;
  border-radius: 2px;
  background: #14b8a6;
  margin-bottom: 0.65rem;
}
.sx-1ad5089b {
  height: 4px;
  border-radius: 2px;
  background: #5b3df0;
  margin-bottom: 0.65rem;
}
.sx-b9535556 {
  height: 4px;
  border-radius: 2px;
  background: #cbd5e1;
  margin-bottom: 0.65rem;
}
.sx-8828a880 {
  height: 4px;
  border-radius: 2px;
  background: #f59e0b;
  margin-bottom: 0.65rem;
}
.sx-95147e89 {
  height: 500px;
  border-radius: 0 0 14px 14px;
}
.sx-31a7aa5a {
  height: 50px;
  padding-left: 2.8rem;
  font-size: 1.05rem;
}
.sx-932ae956 {
  height: 60px;
  background: linear-gradient(135deg, #06b6d433, #06b6d411);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-bc5cd1b5 {
  height: 60px;
  background: linear-gradient(135deg, #0ea5e933, #0ea5e911);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-f97a8aca {
  height: 60px;
  background: linear-gradient(135deg, #14b8a633, #14b8a611);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-37f53acf {
  height: 60px;
  background: linear-gradient(135deg, #22d3ee33, #22d3ee11);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-e4d60f5e {
  height: 60px;
  background: linear-gradient(135deg, #8b5cf633, #8b5cf611);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-2a558eec {
  height: 60px;
  background: linear-gradient(135deg, #a855f733, #a855f711);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-7ec630bf {
  height: 60px;
  background: linear-gradient(135deg, #ec489933, #ec489911);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-dc9a0a50 {
  height: 60px;
  background: linear-gradient(135deg, #f43f5e33, #f43f5e11);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-798ffc28 {
  height: 60px;
  background: linear-gradient(135deg, #f59e0b33, #f59e0b11);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-c3bcc354 {
  height: 60px;
  background: linear-gradient(135deg, #fb923c33, #fb923c11);
  border-radius: 14px 14px 0 0;
  margin: -1.35rem -1.35rem 0;
  position: relative;
}
.sx-339f805b {
  height: 6px;
}
.sx-998af9d7 {
  height: 80px;
}
.sx-0502ecdf {
  height: 80px;
  background: linear-gradient(135deg, #5b3df0, #22d3ee);
}
.sx-aff919f4 {
  height: 80px;
  margin-top: 1rem;
  position: relative;
}
.sx-364b7878 {
  height: 90px;
  width: 100%;
  object-fit: cover;
}
.sx-0c8b7b96 {
  left: 50%;
}
.sx-55180b4c {
  margin-top: -40px;
  position: relative;
}
.sx-7e02b2cf {
  margin-top: -60px;
  position: relative;
}
.sx-f2f7be23 {
  max-height: 240px;
  overflow: auto;
}
.sx-16418fd1 {
  max-height: 340px;
  overflow-y: auto;
  position: relative;
}
.sx-c2920b4e {
  max-height: 400px;
}
.sx-5b414081 {
  max-height: 80px;
  overflow-y: auto;
  font-size: 0.8rem;
}
.sx-2adef0bb {
  max-height: 80vh;
}
.sx-ff65788c {
  max-width: 100px;
}
.sx-bc21563f {
  max-width: 150px;
}
.sx-3831ac5f {
  max-width: 200px;
}
.sx-284b8423 {
  max-width: 340px;
}
.sx-757df271 {
  max-width: 380px;
}
.sx-e5bdc370 {
  max-width: 520px;
}
.sx-d80f5e63 {
  max-width: 560px;
}
.sx-9712494b {
  max-width: 640px;
  position: relative;
}
.sx-d031234f {
  max-width: 680px;
}
.sx-bb37be3a {
  max-width: 720px;
  margin: 0 auto;
}
.sx-c23110ae {
  max-width: 800px;
}
.sx-2941d9c0 {
  max-width: 80px;
}
.sx-e0c9b27a {
  max-width: 90px;
}
.sx-c551887b {
  min-height: 1.2em;
}
.sx-2fcf3e1a {
  min-height: 230px;
}
.sx-fb1142f9 {
  min-height: 260px;
}
.sx-281cc327 {
  min-height: 380px;
  overflow-y: auto;
}
.sx-f68866c5 {
  min-height: 380px;
  resize: none;
}
.sx-6374b802 {
  min-height: 400px;
  font-size: 1rem;
  line-height: 1.7;
}
.sx-921a266c {
  min-height: 410px;
}
.sx-b1a63776 {
  min-height: 46px;
}
.sx-1328f068 {
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
}
.sx-0b554244 {
  min-width: 100px;
}
.sx-4569e1e3 {
  min-width: 100px;
  background: var(--bs-primary-bg-subtle);
}
.sx-6686b386 {
  min-width: 260px;
}
.sx-743f1458 {
  min-width: 340px;
}
.sx-ba9be340 {
  min-width: 640px;
  padding: 1rem;
}
.sx-ec46ce82 {
  min-width: 90px;
}
.sx-3c633b8d {
  opacity: 0.7;
  color: #fff;
}
.sx-62f51076 {
  opacity: 0.8;
}
.sx-909eb0f2 {
  opacity: 0.9;
  position: relative;
}
.sx-df74e8d8 {
  overflow-x: auto;
}
.sx-439c1d76 {
  overflow: hidden;
  border-radius: 14px;
}
.sx-f5a4ed9e {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sx-03d05a12 {
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
}
.sx-e4fad357 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #fbbf24;
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 99px;
  border: 2px solid var(--ny-card);
}
.sx-ae9f7175 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--ny-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-8ba8fd03 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: #fbbf24;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  color: #000;
  font-size: 0.6rem;
  font-weight: 800;
}
.sx-64cb0a22 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: #fbbf24;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 0.6rem;
  font-weight: 800;
  border: 2px solid #0f172a;
}
.sx-9445e483 {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: #9ca3af;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  border: 2px solid var(--ny-card);
}
.sx-12f2d222 {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: #d97706;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  border: 2px solid var(--ny-card);
}
.sx-77529120 {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--ny-grad-warm);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  border: 2px solid var(--ny-card);
}
.sx-1352ac4d {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.15),
    transparent 70%
  );
}
.sx-8e24eec3 {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.15), transparent 70%);
}
.sx-667cb1c3 {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.18);
}
.sx-a3eade86 {
  position: absolute;
  bottom: -90px;
  left: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.18);
}
.sx-cf3f8566 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(91, 61, 240, 0.65),
    rgba(34, 211, 238, 0.4)
  );
}
.sx-7298dbba {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-ce07c6f7 {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.sx-91c10dba {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--ny-danger);
  border-radius: 50%;
  border: 2px solid var(--ny-card);
}
.sx-785d4196 {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.06), transparent 70%);
}
.sx-b79da432 {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 70%);
}
.sx-d19ab973 {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.6rem;
}
.sx-48f77656 {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 70%);
}
.sx-ea9f62e3 {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 61, 240, 0.18), transparent 70%);
}
.sx-27c8dc89 {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.sx-e5df3e53 {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.sx-76ec86cb {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
}
.sx-b0ebb5df {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
}
.sx-4f8c427b {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f97316);
}
.sx-9aaa9852 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #fff, #fbbf24);
}
.sx-9994cbf3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}
.sx-c6e3d0c8 {
  position: absolute;
  top: 18px;
  height: 4px;
  background: var(--bs-primary);
  border-radius: 2px;
  left: 10%;
  right: 30%;
}
.sx-1286fe82 {
  position: absolute;
  top: 18px;
  height: 4px;
  background: var(--bs-warning);
  border-radius: 2px;
  left: 20%;
  right: 10%;
}
.sx-1546ef56 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
.sx-8802b95a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5rem;
  color: #fff;
  opacity: 0.9;
}
.sx-ac6fcf5c {
  position: relative;
  height: 120px;
}
.sx-13d4b1f7 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(91, 61, 240, 0.05),
    rgba(34, 211, 238, 0.06)
  );
}
.sx-b2b13a05 {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sx-b3875ea3 {
  position: relative;
  padding: 1.75rem 2rem;
}
.sx-5ab34d77 {
  position: sticky;
  bottom: -1rem;
  background: var(--ny-card);
  padding: 0.85rem 0;
  border-top: 1px solid var(--ny-border);
  margin: 1rem -1.35rem -1.35rem;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}
.sx-b09e6da8 {
  position: sticky;
  top: 0;
  z-index: 1;
}
.sx-750c6ce8 {
  resize: none;
  overflow: hidden;
}
.sx-8b03d498 {
  table-layout: fixed;
  width: 100%;
}
.sx-d09fdbdf {
  text-decoration: underline dotted;
  cursor: help;
}
.sx-065c2b4c {
  top: -8px;
  right: -4px;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
}
.sx-ef384102 {
  top: 0.65rem;
  left: 0.65rem;
  background: rgba(244, 63, 94, 0.95);
  color: #fff;
}
.sx-79e58058 {
  top: 0.65rem;
  right: 0.65rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}
.sx-734a158d {
  top: 100%;
  display: none;
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}
.sx-690e92cb {
  top: 1rem;
  right: 1rem;
}
.sx-2ca57345 {
  transform: rotate(-4deg);
}
.sx-5ea263ca {
  transform: rotate(3deg);
}
.sx-f162d097 {
  width: 1%;
}
.sx-d659c4cf {
  width: 10%;
  background: var(--ny-grad-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.sx-6fd8c27f {
  width: 100%;
  height: 0.6rem;
}
.sx-fc4f3d10 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sx-11f550cc {
  width: 100%;
  height: 180px;
  border-radius: 14px;
}
.sx-1cf8e183 {
  width: 100%;
  height: 500px;
  border: 0;
  border-radius: 0 0 14px 14px;
}
.sx-3c54d4fa {
  width: 100%;
  height: 90px;
  border-radius: 10px;
}
.sx-6910ad66 {
  width: 100px;
  height: 0.6rem;
  border-radius: 4px;
}
.sx-ca328bb9 {
  width: 100px;
  height: 30px;
  border-radius: 8px;
}
.sx-b3a9e581 {
  width: 100px;
  height: 32px;
}
.sx-7c032f0b {
  width: 12%;
}
.sx-6569c716 {
  width: 120px;
  height: 0.6rem;
  margin: 0;
}
.sx-b2df2df5 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-primary) 0% 68%,
    var(--ny-hover) 68% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-2c838514 {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--bs-primary);
}
.sx-ac260bb1 {
  width: 120px;
  height: 18px;
  border-radius: 14px;
  background: rgba(91, 61, 240, 0.18);
}
.sx-04605b5b {
  width: 120px;
  height: 36px;
  border-radius: 8px;
}
.sx-211889e2 {
  width: 12px;
  height: 12px;
  background: #4338ca;
  border-radius: 2px;
}
.sx-c88eba0e {
  width: 12px;
  height: 12px;
  background: #6366f1;
  border-radius: 2px;
}
.sx-20c29614 {
  width: 12px;
  height: 12px;
  background: #a5b4fc;
  border-radius: 2px;
}
.sx-d030618e {
  width: 12px;
  height: 12px;
  background: #e0e7ff;
  border-radius: 2px;
}
.sx-470ead61 {
  width: 130px;
  height: 0.6rem;
  margin: 0;
}
.sx-6bbe8018 {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(var(--ny-danger) 0% 18%, var(--ny-hover) 18% 100%);
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-a67f40ae {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-primary) 0% 78%,
    var(--ny-hover) 78% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-dcc1b2e9 {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-success) 0% 92%,
    var(--ny-hover) 92% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-1a7d1fef {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-warning) 0% 42%,
    var(--ny-hover) 42% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-abb22f49 {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sx-fd24f08b {
  width: 140px;
  height: 0.6rem;
  margin: 0;
}
.sx-dcd2c410 {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-primary) 0% 68%,
    var(--ny-hover) 68% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-bb71c13e {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-primary) 0% 78%,
    var(--ny-hover) 78% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-6a38f9cc {
  width: 140px;
  height: 1rem;
  border-radius: 6px;
}
.sx-df4effc5 {
  width: 140px;
  height: 30px;
  border-radius: 99px;
}
.sx-3a4c8495 {
  width: 14px;
  height: 14px;
  background: #5b21b6;
  border-radius: 2px;
}
.sx-5db6663b {
  width: 14px;
  height: 14px;
  background: #7c3aed;
  border-radius: 2px;
}
.sx-51cb30ea {
  width: 14px;
  height: 14px;
  background: #a78bfa;
  border-radius: 2px;
}
.sx-9a5d6f23 {
  width: 14px;
  height: 14px;
  background: #ddd6fe;
  border-radius: 2px;
}
.sx-737760ee {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
}
.sx-c393a7fc {
  width: 150px;
  height: 18px;
  border-radius: 14px;
}
.sx-be99ae25 {
  width: 16%;
}
.sx-b75d3903 {
  width: 160px;
  height: 160px;
}
.sx-38e37de4 {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ny-primary) 0% 78%,
    var(--ny-hover) 78% 100%
  );
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-f5c56c19 {
  width: 18%;
  background: var(--ny-grad-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.sx-a8cff936 {
  width: 180px;
  height: 18px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(91, 61, 240, 0.18);
  margin-bottom: 0.35rem;
}
.sx-be72dffd {
  width: 180px;
  height: 32px;
}
.sx-d41f8b9d {
  width: 20%;
  height: 0.6rem;
}
.sx-a29b2232 {
  width: 20px;
}
.sx-0add6cc8 {
  width: 20px;
  height: 20px;
  background: #5b3df0;
  border-radius: 4px;
  border: 1px solid var(--bs-border-color);
}
.sx-cf2450f1 {
  width: 220px;
  height: 18px;
  border-radius: 14px 14px 14px 4px;
  margin-bottom: 0.35rem;
}
.sx-c36b2672 {
  width: 24%;
}
.sx-316b3d0b {
  width: 24%;
  background: var(--ny-grad-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.sx-026cc124 {
  width: 24px;
  height: 24px;
  line-height: 1;
}
.sx-28e5a32f {
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.sx-061f07a9 {
  width: 250px;
  height: 18px;
  border-radius: 14px 14px 14px 4px;
}
.sx-baae3c1d {
  width: 26%;
}
.sx-6f687733 {
  width: 27%;
}
.sx-6070c201 {
  width: 28%;
}
.sx-cbb6cf41 {
  width: 30%;
  height: 0.6rem;
}
.sx-342efe44 {
  width: 30px;
}
.sx-f451bb36 {
  width: 32%;
}
.sx-ea3c4956 {
  width: 32px;
  height: 24px;
  font-size: 0.9rem;
  line-height: 1;
}
.sx-8c59c7d4 {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0f172a, #475569);
  border: 0;
}
.sx-ee79d304 {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  border: 0;
}
.sx-afe726fa {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #5b3df0, #22d3ee);
  border: 0;
}
.sx-ab3a14e6 {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border: 0;
}
.sx-da44e7b4 {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  border: 0;
}
.sx-5244eab7 {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.sx-5f8af3ed {
  width: 34%;
}
.sx-ae1c2125 {
  width: 35%;
  height: 0.6rem;
}
.sx-ff33fafb {
  width: 36.5%;
}
.sx-dcc5c7a6 {
  width: 36px;
  height: 36px;
  background: #14b8a6;
  border: 0;
}
.sx-5d71ab50 {
  width: 36px;
  height: 36px;
  background: #22c55e;
  border: 0;
}
.sx-cd49fa7c {
  width: 36px;
  height: 36px;
  background: #22d3ee;
  border: 0;
}
.sx-b4cd045c {
  width: 36px;
  height: 36px;
  background: #5b3df0;
  border: 0;
}
.sx-ef195fae {
  width: 36px;
  height: 36px;
  background: #8b5cf6;
  border: 0;
}
.sx-ca98d4e4 {
  width: 36px;
  height: 36px;
  background: #ec4899;
  border: 0;
}
.sx-12ad0e51 {
  width: 36px;
  height: 36px;
  background: #f43f5e;
  border: 0;
}
.sx-a5875be3 {
  width: 36px;
  height: 36px;
  background: #f59e0b;
  border: 0;
}
.sx-17167377 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ny-grad-amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.sx-0ffe6ad4 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ny-grad-cool);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.sx-cf4fc3e6 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ny-grad-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.sx-97851f04 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ny-grad-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.sx-ed8671b6 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ny-grad-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.sx-b8695696 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-0504d7ab {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #14b8a6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-a35588b4 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5b3df0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-97555786 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f7931a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-0fa57a96 {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}
.sx-fd8d1eb9 {
  width: 36px;
  text-align: center;
  background: var(--bs-light);
}
.sx-342b3712 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
}
.sx-f7c31029 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1976d2, #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
}
.sx-13e4ebf3 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  color: var(--ny-info);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-f4ffca92 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(91, 61, 240, 0.1);
  color: var(--ny-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-059da94a {
  width: 4%;
}
.sx-71ac3c1f {
  width: 40%;
  height: 0.7rem;
}
.sx-daa9f782 {
  width: 40%;
  height: 0.85rem;
}
.sx-2f82134d {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--ny-border);
  color: var(--ny-muted);
}
.sx-26ea25b2 {
  width: 40px;
  text-align: right;
}
.sx-9df0727a {
  width: 420px;
}
.sx-97b5b0bf {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
}
.sx-29ea7592 {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1976d2, #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
}
.sx-826f30be {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
}
.sx-41dd0882 {
  width: 44%;
}
.sx-bc9fe67d {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--ny-grad-primary);
  color: #fff;
}
.sx-bc4e4fb4 {
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sx-7f422400 {
  width: 48%;
}
.sx-af8e6116 {
  width: 48%;
  background: var(--ny-grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.sx-beb95f6a {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-2cbfa3e2 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #0052cc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-d3c09d1c {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #0f9d58;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-e16ae980 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #181717;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-6bcbab42 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #4a154b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-31a774c2 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #5e6ad2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-7a446d48 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #635bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-fed3c7ca {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #a259ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-2bb248f7 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #ff4f00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-6eb02a2b {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(244, 63, 94, 0.12);
  color: var(--ny-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.sx-0aad7a66 {
  width: 5%;
}
.sx-cf8c9649 {
  width: 50%;
  height: 0.55rem;
  border-radius: 4px;
}
.sx-50afc565 {
  width: 50px;
  height: 0.6rem;
  margin: 0;
}
.sx-68c4f6d8 {
  width: 52px;
  height: 52px;
}
.sx-8f0c90ee {
  width: 55%;
  height: 0.55rem;
}
.sx-5ec75fef {
  width: 55%;
  height: 0.6rem;
}
.sx-8f7f6c86 {
  width: 56%;
}
.sx-7779967f {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.sx-3f4bcd8d {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  color: #fbbf24;
}
.sx-4034e875 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ny-grad-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 61, 240, 0.35);
}
.sx-49963499 {
  width: 60px;
  height: 0.55rem;
  border-radius: 4px;
}
.sx-1c33d2d1 {
  width: 60px;
  height: 0.6rem;
  margin: 0;
}
.sx-00e79a12 {
  width: 62%;
}
.sx-bd8f3d6d {
  width: 64px;
  height: 64px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(91, 61, 240, 0.3);
}
.sx-87dd21d4 {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}
.sx-59e47bd0 {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #5b3df0, #22d3ee);
}
.sx-27cfd914 {
  width: 64px;
  height: 64px;
  background: rgba(91, 61, 240, 0.1);
  border: 2px dashed #5b3df0;
}
.sx-0d69fd11 {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}
.sx-e4734844 {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  position: relative;
}
.sx-b9307cbb {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(91, 61, 240, 0.08);
  position: relative;
}
.sx-c0bc45ea {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(#f59e0b 0% 35%, var(--ny-hover) 35% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-aae1e73b {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(#f59e0b 0% 35%, var(--ny-hover) 35% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-5d083264 {
  width: 64px;
  height: 64px;
  font-size: 2rem;
}
.sx-0c1d3864 {
  width: 65%;
}
.sx-ed8a0861 {
  width: 65%;
  height: 0.6rem;
}
.sx-0b823724 {
  width: 65px;
  height: 0.6rem;
  margin: 0;
}
.sx-b274ba78 {
  width: 66%;
}
.sx-dcc94a3b {
  width: 69%;
}
.sx-5d372b7a {
  width: 7%;
}
.sx-337dc0f8 {
  width: 70%;
}
.sx-9a26e2f6 {
  width: 70px;
  height: 0.6rem;
  margin: 0;
}
.sx-93e37d42 {
  width: 72%;
}
.sx-71ca5a46 {
  width: 72px;
  height: 72px;
}
.sx-46438eb3 {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.sx-7e23cbd2 {
  width: 73%;
}
.sx-a37a7279 {
  width: 75px;
  height: 0.6rem;
  margin: 0;
}
.sx-ad669e1e {
  width: 80%;
}
.sx-ad4b41f2 {
  width: 80px;
  height: 0.6rem;
  margin: 0;
}
.sx-7e9ec261 {
  width: 80px;
  height: 30px;
}
.sx-127d763d {
  width: 80px;
  height: 64px;
  border-radius: 12px;
  background: #5b3df0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.sx-ff1e5b08 {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.sx-f581addf {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  object-fit: cover;
}
.sx-09dbd276 {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.sx-85886783 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ny-grad-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(20, 184, 166, 0.4);
  animation: badgePulse 1.5s ease-in-out infinite;
}
.sx-5df0d80d {
  width: 83%;
}
.sx-a0dccf86 {
  width: 85%;
}
.sx-493883c8 {
  width: 87%;
}
.sx-5c2630cc {
  width: 88%;
  height: 0.6rem;
}
.sx-170a0aca {
  width: 88px;
  height: 88px;
  font-size: 2.5rem;
}
.sx-92baf31e {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  display: inline-block;
}
.sx-a20531d7 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ny-primary);
  display: inline-block;
}
.sx-057353ea {
  width: 90%;
}
.sx-c8bfe477 {
  width: 90%;
  height: 1.5rem;
  border-radius: 6px;
}
.sx-be5041d7 {
  width: 90px;
  height: 0.6rem;
  margin: 0;
}
.sx-8255f4fb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--ny-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sx-9b197579 {
  width: 94%;
}
.sx-90cf8f2a {
  width: 95%;
}
.sx-c05a0600 {
  z-index: 10;
  max-width: 240px;
}

/* AUTO-EXTRACTED BACKGROUND-IMAGE STYLES */

.sx-bg-5a08ede0 {
  background: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1200&amp;h=675&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-bg-77f5cca7 {
  height: 100%;
  background: url("https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=300&amp;h=300&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 0 0 14px;
  min-height: 170px;
}
.sx-bg-5c0ce6eb {
  height: 100%;
  background: url("https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&amp;h=300&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 0 0 14px;
  min-height: 170px;
}
.sx-bg-33460a59 {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-5d63f505 {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-106726cf {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-b3ccf55f {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-64644a52 {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-bfd42556 {
  height: 120px;
  background: url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  border-radius: 14px 14px 0 0;
}
.sx-bg-e9829e89 {
  height: 140px;
  border-radius: 14px;
  background: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&amp;h=300&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
  margin-bottom: 1rem;
}
.sx-bg-3b4b620f {
  height: 180px;
  background: url("https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&amp;h=360&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-32ea853e {
  height: 180px;
  background: url("https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&amp;h=360&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-2a9583aa {
  height: 180px;
  background: url("https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&amp;h=360&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-d4831d6e {
  height: 180px;
  background: url("https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&amp;h=360&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-2b609b5a {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-bc7e92c4 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-d4fa60ed {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-a02bc7b5 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-c494663f {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1467810563316-b5476525c0f9?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-67a794d6 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-3680f55b {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-a6d630c1 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-4085eefa {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1493612276216-ee3925520721?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-06b69175 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-f3fe7d9a {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-89967cd6 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-2999e987 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-8782e6e4 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1518495973542-4542c06a5843?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-e939af8b {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-24b9c1e3 {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1600&amp;h=500&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-dbef7d1c {
  height: 220px;
  background: url("https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&amp;h=440&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-792cd402 {
  height: 420px;
  background: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=1600&amp;h=600&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-c3d47d67 {
  height: 420px;
  background: url("https://images.unsplash.com/photo-1493612276216-ee3925520721?w=1600&amp;h=600&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}
.sx-bg-e96ed7b2 {
  height: 420px;
  background: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?w=1600&amp;h=600&amp;fit=crop&amp;auto=format&amp;q=80")
    center/cover no-repeat;
  position: relative;
}

/* ==========================================================================
   COMPREHENSIVE RTL SUPPORT
   Applies when html[dir="rtl"] is set by the customizer.
   Works in tandem with bootstrap.rtl.min.css (swapped in by app.js).
   ========================================================================== */

/* ---- Customizer label active state (LTR/RTL/mode chooser fix) ---- */
.cz-layout-opt:has(input[type="radio"]:checked) {
  border-color: var(--ny-primary);
  background: rgba(91, 61, 240, 0.06);
  color: var(--ny-primary);
}
.cz-layout-opt input[type="radio"] {
  display: none;
}
.cz-swatch.active {
  box-shadow:
    0 0 0 3px var(--ny-card),
    0 0 0 5px var(--ny-primary);
  transform: scale(1.1);
}

/* ============================================================
   RTL: Layout shell (sidebar, topbar, content)
   ============================================================ */
/* Topbar padding adjusted later only for vertical/mini/boxed where brandzone is hidden */
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  transform: translateX(0);
  border-right: 0;
  border-left: 1px solid var(--ny-border);
}
[dir="rtl"] .content {
  margin-left: 0;
  margin-right: var(--ny-sidebar-w);
}
[dir="rtl"] body.sidebar-mini .content {
  margin-right: var(--ny-sidebar-w-mini);
  margin-left: 0;
}
[dir="rtl"] body.layout-horizontal .content,
[dir="rtl"] body.layout-horizontal main.page {
  margin-right: 0;
}
[dir="rtl"] body.layout-boxed .topbar {
  left: auto;
  right: calc(50vw - 740px);
}
[dir="rtl"] body.layout-boxed .sidebar {
  left: auto;
  right: calc(50vw - 740px);
}

@media (max-width: 991.98px) {
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }
  [dir="rtl"] body.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

/* ============================================================
   RTL: Sidebar menu
   ============================================================ */
[dir="rtl"] .menu > li > a {
  padding-right: 1rem;
  padding-left: 1rem;
}
[dir="rtl"] .menu > li > a > i:first-child {
  margin-right: 0;
  margin-left: 0.8rem;
}
/* Mini sidebar in RTL: center icons, kill icon margins, kill paddings */
[dir="rtl"] body.sidebar-mini .menu > li > a {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
[dir="rtl"] body.sidebar-mini .menu > li > a > i:first-child {
  margin-left: 0;
  margin-right: 0;
}
[dir="rtl"] .menu .menu-arrow {
  margin-left: 0;
  margin-right: auto;
  transform: rotate(180deg);
}
[dir="rtl"] .menu > li.open > a .menu-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .menu .menu-badge {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .menu > li.active > a::after {
  right: auto;
  left: -0.75rem;
  border-radius: 0 5px 5px 0;
}
[dir="rtl"] .submenu a {
  padding-right: 3rem;
  padding-left: 0.85rem;
  text-align: right;
}
[dir="rtl"] .submenu a::before {
  left: auto;
  right: 2.05rem;
}
[dir="rtl"] .menu-caption {
  padding-right: 1rem;
  padding-left: 0.5rem;
}
[dir="rtl"] .sidebar-promo {
  text-align: right;
}

/* Mini sidebar flyout positioning in RTL is handled by app.js (uses right offset) */

/* ============================================================
   RTL: Topbar
   ============================================================ */
[dir="rtl"] .topbar-search {
  margin-right: 0;
  margin-left: auto;
}
[dir="rtl"] .topbar-search > i {
  left: auto;
  right: 1rem;
}
[dir="rtl"] .topbar-search input {
  padding: 0 2.6rem 0 1rem;
}
[dir="rtl"] .topbar-search kbd {
  right: auto;
  left: 0.75rem;
}
/* Do NOT force flex-direction in RTL — natural RTL flow already reverses children */

/* RTL vertical/mini/boxed: hide topbar brandzone (sidebar's own brand is shown) */
/* Reserve right space equal to sidebar width so topbar-inner doesn't go under the sidebar */
[dir="rtl"] body:not(.layout-horizontal) .topbar-brandzone {
  display: none;
}
[dir="rtl"] body:not(.layout-horizontal) .topbar {
  padding-right: var(--ny-sidebar-w);
}
[dir="rtl"] body.sidebar-mini .topbar {
  padding-right: var(--ny-sidebar-w-mini);
}
[dir="rtl"] body.layout-boxed .topbar {
  padding-right: var(--ny-sidebar-w);
}
[dir="rtl"] body:not(.layout-horizontal) .topbar-inner {
  padding-right: 0;
  padding-left: 1.5rem;
}
[dir="rtl"] .badge-num {
  left: auto;
  right: auto;
  transform: translate(-30%, -30%);
}
[dir="rtl"] .badge-dot {
  left: auto;
  right: 8px;
}
[dir="rtl"] .user-menu-btn {
  padding: 5px 5px 5px 10px;
}
[dir="rtl"] .user-menu-btn .user-info {
  text-align: right;
}
[dir="rtl"] .user-info strong,
[dir="rtl"] .user-info small {
  text-align: right;
}

/* ============================================================
   RTL: Dropdowns / notifications / messages
   ============================================================ */
/* bootstrap.rtl.min.css handles dropdown-menu-end positioning natively */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}
/* Do NOT row-reverse — dir="rtl" already flips flex children naturally */
[dir="rtl"] .notif-item .notif-meta {
  text-align: right;
}
[dir="rtl"] .apps-grid a {
  text-align: center;
}
[dir="rtl"] .dropdown-item i.me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* Horizontal nav dropdowns */
/* RTL horizontal nav: keep all items on one line WITHOUT clipping dropdowns
   - flex-wrap: nowrap forces one row
   - overflow stays visible so dropdowns aren't clipped
   - regular dropdowns anchor to their .h-nav-dd (position:relative)
   - mega-menu keeps Bootstrap's .position-static so it spans the full nav */
[dir="rtl"] .h-nav {
  flex-wrap: nowrap;
  overflow: visible;
  gap: 0.1rem;
}
[dir="rtl"] .h-nav-item {
  padding: 0.55rem 0.7rem;
  flex-shrink: 0;
  white-space: nowrap;
}
[dir="rtl"] .h-nav-dd:not(.position-static) {
  flex-shrink: 0;
  position: relative;
}
[dir="rtl"] .h-nav-dd:not(.position-static) > .dropdown-menu {
  text-align: right;
  left: auto !important;
  right: 0 !important;
}
[dir="rtl"] .h-nav-mega {
  text-align: right;
}
[dir="rtl"] .h-nav-mega .mega-col {
  text-align: right;
}
/* If items don't fit on very narrow viewports, allow horizontal page scroll instead of dropdown clipping */
[dir="rtl"] body.layout-horizontal {
  overflow-x: auto;
}

/* Bootstrap helper flips are handled by bootstrap.rtl.min.css — no override needed */

/* ============================================================
   RTL: Cards / lists / tables
   ============================================================ */
[dir="rtl"] .card-header,
[dir="rtl"] .card-body,
[dir="rtl"] .card-footer {
  text-align: right;
}
[dir="rtl"] .list-group-item {
  text-align: right;
}
[dir="rtl"] table {
  text-align: right;
}
[dir="rtl"] table thead th {
  text-align: right;
}
[dir="rtl"] table .text-end {
  text-align: left !important;
}
[dir="rtl"] table .text-start {
  text-align: right !important;
}

/* ============================================================
   RTL: Form components
   ============================================================ */
[dir="rtl"] .form-check {
  padding-left: 0;
  padding-right: 1.5em;
}
[dir="rtl"] .form-check .form-check-input {
  margin-left: 0;
  margin-right: -1.5em;
  float: right;
}
[dir="rtl"] .form-switch {
  padding-left: 0;
  padding-right: 2.5em;
}
[dir="rtl"] .form-switch .form-check-input {
  margin-left: 0;
  margin-right: -2.5em;
}
[dir="rtl"]
  .input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .invalid-tooltip
  ) {
  margin-left: 0;
  margin-right: -1px;
}
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[dir="rtl"] .input-group > .input-group-text:first-child {
  border-radius: 0 0.375rem 0.375rem 0;
}
[dir="rtl"] .input-group > .input-group-text:last-child {
  border-radius: 0.375rem 0 0 0.375rem;
}

/* ============================================================
   RTL: Misc components (breadcrumb / pagination / progress / close)
   ============================================================ */
[dir="rtl"] .breadcrumb {
  padding-right: 0;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
  padding-right: 0.5rem;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  padding-right: 0;
  padding-left: 0.5rem;
  float: right;
  content: "/";
}

[dir="rtl"] .pagination {
  padding-right: 0;
}
[dir="rtl"] .page-item:first-child .page-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
[dir="rtl"] .page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
[dir="rtl"] .page-link i.mdi-chevron-left,
[dir="rtl"] .page-link i.mdi-chevron-right {
  transform: scaleX(-1);
}

[dir="rtl"] .btn-close {
  margin: 0 auto 0 0;
}
[dir="rtl"] .modal-header .btn-close {
  margin: -0.5rem auto -0.5rem -0.5rem;
}

[dir="rtl"] .progress {
  direction: ltr;
}
[dir="rtl"] .alert-dismissible {
  padding-right: 1rem;
  padding-left: 3rem;
}
[dir="rtl"] .alert-dismissible .btn-close {
  right: auto;
  left: 0;
}

/* ============================================================
   RTL: Icons (only flip directional icons, not all)
   ============================================================ */
[dir="rtl"] .mdi-chevron-left:not(.no-flip)::before {
  content: "\F0142";
} /* chevron-right glyph */
[dir="rtl"] .mdi-chevron-right:not(.no-flip)::before {
  content: "\F0141";
} /* chevron-left glyph */
[dir="rtl"] .mdi-arrow-left:not(.no-flip)::before {
  content: "\F0054";
}
[dir="rtl"] .mdi-arrow-right:not(.no-flip)::before {
  content: "\F0055";
}
[dir="rtl"] .mdi-arrow-right-thin:not(.no-flip)::before {
  content: "\F19B6";
}
[dir="rtl"] .mdi-arrow-left-thin:not(.no-flip)::before {
  content: "\F19B4";
}

/* ============================================================
   RTL: App-specific extracted utility classes
   ============================================================ */
[dir="rtl"] .ny-overlay-tr {
  right: auto;
  left: 0.65rem;
}
[dir="rtl"] .ny-overlay-tl {
  left: auto;
  right: 0.65rem;
}
[dir="rtl"] .ny-overlay-bl {
  left: 0.65rem;
  right: 0.65rem;
}
[dir="rtl"] .ny-avatar-status-corner {
  right: auto;
  left: 6px;
}
[dir="rtl"] .ny-pos-tr-1 {
  right: auto;
  left: 1rem;
}
[dir="rtl"] .ny-blob-tl-180 {
  left: auto;
  right: -60px;
}
[dir="rtl"] .ny-blob-tr-180 {
  right: auto;
  left: -50px;
}
[dir="rtl"] .ny-blob-br-200 {
  right: auto;
  left: -80px;
}
[dir="rtl"] .ny-blob-tr-140 {
  right: auto;
  left: -40px;
}

/* Customizer offcanvas in RTL: bootstrap.rtl handles position flip; we just adjust border */
[dir="rtl"] .offcanvas-end {
  border-left: 0;
  border-right: 1px solid var(--ny-border);
}

/* ============================================================
   RTL: Email / Chat / Kanban / Calendar app layouts
   ============================================================ */
[dir="rtl"] .mail-sidebar {
  border-right: 0;
  border-left: 1px solid var(--ny-border);
}
[dir="rtl"] .mail-list {
  border-right: 0;
  border-left: 1px solid var(--ny-border);
}
[dir="rtl"] .chat-sidebar {
  border-right: 0;
  border-left: 1px solid var(--ny-border);
}
[dir="rtl"] .chat-bubble.me {
  margin-left: 0;
  margin-right: auto;
  border-radius: 14px 14px 0 14px;
}
[dir="rtl"] .chat-bubble.them {
  margin-right: 0;
  margin-left: auto;
  border-radius: 14px 14px 14px 0;
}

/* ============================================================
   RTL: Kbd / search input keyboard shortcut hint position
   ============================================================ */
[dir="rtl"] kbd {
  direction: ltr;
  display: inline-block;
}