:root {
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-deep: rgba(255, 255, 255, 0.78);
  --glass-bg-light: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: 18px;
  --glass-blur-heavy: 24px;
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  --glass-shadow-sm: 0 4px 16px rgba(31, 38, 135, 0.1);
  --glass-radius: 16px;
  --glass-radius-sm: 10px;
  --accent-primary: #6366f1;
  --accent-primary-light: #818cf8;
  --accent-secondary: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
  --accent-gradient-warm: linear-gradient(135deg, #f093fb, #f5576c);
  --text-primary: #1e1b4b;
  --text-secondary: #4338ca;
  --sidebar-bg: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
  --sidebar-text: rgba(255, 255, 255, 0.85);
  --sidebar-text-active: #fff;
  --sidebar-item-hover: rgba(255, 255, 255, 0.1);
  --sidebar-item-active: rgba(255, 255, 255, 0.18);
  --page-bg: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 25%, #fce7f3 50%, #e0e7ff 75%, #dbeafe 100%);
}

html, body {
  background: var(--page-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  top: -50%;
  right: -30%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  bottom: -40%;
  left: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.n-layout,
.n-layout-scroll-container {
  background: transparent !important;
}

.layout-default-background {
  background: transparent !important;
}

.n-layout-sider,
.n-layout-sider-scroll-container,
.layout-sider,
.layout-side-drawer,
.layout-side-drawer .layout-sider,
.n-layout-sider .n-layout-sider-scroll-container {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(30, 27, 75, 0.2) !important;
}

.n-menu.n-menu--vertical {
  background: transparent !important;
}

.n-menu .n-menu-item {
  margin: 2px 8px !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n-menu .n-menu-item-content {
  color: var(--sidebar-text) !important;
  border-radius: var(--glass-radius-sm) !important;
}

.n-menu .n-menu-item:hover .n-menu-item-content,
.n-menu .n-menu-item-content:hover {
  background: var(--sidebar-item-hover) !important;
  color: var(--sidebar-text-active) !important;
}

.n-menu .n-menu-item-content--selected,
.n-menu .n-menu-item-content--child-active {
  background: var(--sidebar-item-active) !important;
  color: var(--sidebar-text-active) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.25) !important;
}

.n-menu .n-menu-item-content--selected::before,
.n-menu .n-menu-item-content--child-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: var(--accent-gradient) !important;
  border-radius: 0 4px 4px 0 !important;
}

.n-submenu .n-menu-item-content {
  color: var(--sidebar-text) !important;
}

.n-submenu .n-submenu-children .n-menu-item-content {
  color: rgba(255, 255, 255, 0.65) !important;
}

.logo .title,
.layout-header-left .logo .title {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.layout-header,
.n-layout-header {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-sm) !important;
}

.layout-header-light {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
}

.layout-header-trigger:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  border-radius: var(--glass-radius-sm) !important;
}

.tabs-view,
.tabs-view-default-background {
  background: var(--glass-bg-light) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.tabs-view-main .tabs-card-scroll-item {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow-sm) !important;
  transition: all 0.25s ease !important;
}

.tabs-view-main .tabs-card-scroll-item:hover {
  background: var(--glass-bg-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--glass-shadow) !important;
}

.tabs-view-main .tabs-card-scroll .active-item {
  background: var(--glass-bg-deep) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15) !important;
  color: var(--accent-primary) !important;
}

.layout-content-main {
  position: relative;
  z-index: 1;
}

.n-card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all 0.3s ease !important;
}

.n-card:hover {
  box-shadow: 0 8px 40px rgba(31, 38, 135, 0.2) !important;
  transform: translateY(-2px) !important;
}

.n-card-header {
  border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
}

.n-data-table {
  background: transparent !important;
}

.n-data-table .n-data-table-thead {
  background: rgba(99, 102, 241, 0.06) !important;
}

.n-data-table .n-data-table-th {
  background: transparent !important;
  border-bottom: 2px solid rgba(99, 102, 241, 0.12) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.n-data-table .n-data-table-td {
  border-bottom: 1px solid rgba(99, 102, 241, 0.06) !important;
}

.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: rgba(99, 102, 241, 0.04) !important;
}

.n-button--primary-type {
  background: var(--accent-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: all 0.3s ease !important;
}

.n-button--primary-type:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-1px) !important;
}

.n-button--default-type {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
}

.n-input,
.n-input__input-el {
  border-radius: var(--glass-radius-sm) !important;
}

.n-input:not(.n-input--disabled) {
  background: var(--glass-bg-light) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  transition: all 0.3s ease !important;
}

.n-input:not(.n-input--disabled):focus-within,
.n-input:not(.n-input--disabled).n-input--focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  background: var(--glass-bg) !important;
}

.n-select .n-base-selection {
  border-radius: var(--glass-radius-sm) !important;
  background: var(--glass-bg-light) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

.n-modal,
.n-dialog {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: 0 16px 64px rgba(31, 38, 135, 0.25) !important;
}

.n-drawer .n-drawer-content-wrapper {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
}

.n-drawer-header {
  border-bottom: 1px solid var(--glass-border) !important;
}

.n-tag {
  border-radius: 20px !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

.n-tag--primary-type {
  background: rgba(99, 102, 241, 0.12) !important;
  color: var(--accent-primary) !important;
}

.n-tag--success-type {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
}

.n-tag--warning-type {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
}

.n-tag--error-type {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}

.n-message .n-message__content {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
}

.n-notification {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.2) !important;
}

.n-popover:not(.n-popover--raw) {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
}

.n-dropdown-menu {
  background: var(--glass-bg-deep) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
}

.n-dropdown-option:hover .n-dropdown-option-body {
  background: rgba(99, 102, 241, 0.06) !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.35);
}

.n-pagination .n-pagination-item--active {
  background: var(--accent-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3) !important;
}

.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
}

.n-statistic .n-statistic-value__content {
  color: var(--accent-primary) !important;
  font-weight: 700 !important;
}

.n-switch.n-switch--active .n-switch__rail {
  background: var(--accent-gradient) !important;
}

.n-tabs .n-tabs-tab--active .n-tabs-tab__label {
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
}

.n-tabs .n-tabs-bar {
  background: var(--accent-gradient) !important;
}

.n-progress .n-progress-graph-line-fill {
  background: var(--accent-gradient) !important;
}

@keyframes glass-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes glass-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes glass-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.view-account {
  background: var(--page-bg) !important;
  background-attachment: fixed !important;
  background-image: none !important;
  position: relative;
}

.view-account::before {
  content: "";
  position: fixed;
  top: 10%;
  right: 5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 70%);
  animation: glass-float 8s ease-in-out infinite;
  z-index: 0;
}

.view-account::after {
  content: "";
  position: fixed;
  bottom: 5%;
  left: 10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.15), transparent 70%);
  animation: glass-float 6s ease-in-out infinite reverse;
  z-index: 0;
}

.view-account-container {
  position: relative;
  z-index: 1;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 48px 36px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.view-account-top {
  padding: 16px 0 32px !important;
}

.view-account-top-desc {
  color: var(--accent-primary) !important;
  opacity: 0.7;
  letter-spacing: 1px;
}

.modal-content {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
}

.input-field {
  background: var(--glass-bg-light) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: all 0.3s ease !important;
}

.input-field:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.table-toolbar-right-icon :hover {
  color: var(--accent-primary) !important;
}

.table-toolbar-inner-checkbox:hover {
  background: rgba(99, 102, 241, 0.06) !important;
}

.lockscreen {
  background: #0f0a2a !important;
}

.lockscreen.onLockLogin {
  background-color: rgba(15, 10, 42, 0.9) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.n-result .n-result-header__title {
  color: var(--text-primary) !important;
}

.n-loading-bar-container .n-loading-bar {
  background: var(--accent-gradient) !important;
}