/*
 * NFapi Liquid Glass
 *
 * A presentation-only compatibility theme for the official Sub2API UI.
 * It does not add controls, rewrite copy, or mutate component state.
 */

:root {
  color-scheme: light;
  --nf-bg: #f1f1f3;
  --nf-bg-elevated: rgba(255, 255, 255, 0.18);
  --nf-bg-strong: rgba(255, 255, 255, 0.28);
  --nf-bg-soft: rgba(255, 255, 255, 0.08);
  --nf-ink: #1d1d1f;
  --nf-ink-muted: #5f6067;
  --nf-ink-faint: #85868d;
  --nf-link: #465866;
  --nf-line: rgba(78, 82, 89, 0.16);
  --nf-line-strong: rgba(67, 71, 78, 0.30);
  --nf-highlight: rgba(255, 255, 255, 0.62);
  --nf-blue: #087cf0;
  --nf-blue-strong: #0a63d1;
  --nf-cyan: #12bcd4;
  --nf-mint: #15a987;
  --nf-violet: #775be8;
  --nf-pink: #cf4ca5;
  --nf-danger: #d93f53;
  --nf-warning: #c77a00;
  --nf-success: #078b67;
  --nf-radius-card: 16px;
  --nf-radius-control: 11px;
  --nf-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035) 56%, rgba(255, 255, 255, 0.09)),
    rgba(255, 255, 255, 0.035);
  --nf-glass-strong:
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.075) 58%, rgba(255, 255, 255, 0.17)),
    rgba(255, 255, 255, 0.09);
  --nf-overlay-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(247, 247, 249, 0.56) 58%, rgba(239, 239, 242, 0.64)),
    rgba(247, 247, 249, 0.68);
  --nf-shell-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.055) 58%, rgba(255, 255, 255, 0.13)),
    rgba(255, 255, 255, 0.06);
  --nf-glass-soft:
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  --nf-control:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.10)),
    rgba(255, 255, 255, 0.08);
  --nf-control-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
    rgba(255, 255, 255, 0.20);
  --nf-button-glass:
    linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, 0.50) 42%, rgba(255, 255, 255, 0.12) 49%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.10)),
    rgba(255, 255, 255, 0.12);
  --nf-shadow-card:
    0 18px 48px rgba(28, 31, 36, 0.10),
    0 3px 10px rgba(28, 31, 36, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(45, 48, 54, 0.08);
  --nf-shadow-float:
    0 28px 72px rgba(24, 27, 32, 0.20),
    0 8px 22px rgba(24, 27, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --nf-shadow-control:
    0 5px 15px rgba(28, 31, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(45, 48, 54, 0.08);
  --nf-blur: blur(10px) saturate(175%);
  --nf-blur-strong: blur(14px) saturate(185%);
}

html.dark {
  color-scheme: dark;
  --nf-bg: #02050b;
  --nf-bg-elevated: rgba(4, 14, 27, 0.44);
  --nf-bg-strong: rgba(4, 14, 28, 0.58);
  --nf-bg-soft: rgba(5, 19, 36, 0.28);
  --nf-ink: #f4fbff;
  --nf-ink-muted: #a9bdc8;
  --nf-ink-faint: #71838f;
  --nf-link: #69eef5;
  --nf-line: rgba(44, 225, 232, 0.26);
  --nf-line-strong: rgba(44, 225, 232, 0.54);
  --nf-highlight: rgba(194, 250, 255, 0.20);
  --nf-blue: #43a7ff;
  --nf-blue-strong: #6d8cff;
  --nf-cyan: #2ce1e8;
  --nf-mint: #43d9aa;
  --nf-violet: #9b7cff;
  --nf-pink: #f55fbd;
  --nf-danger: #ff6d7f;
  --nf-warning: #ffc14f;
  --nf-success: #48dcad;
  --nf-glass:
    linear-gradient(145deg, rgba(50, 226, 235, 0.09), rgba(255, 255, 255, 0.025) 48%, rgba(245, 73, 183, 0.035) 76%, rgba(0, 0, 0, 0.12)),
    rgba(3, 11, 23, 0.38);
  --nf-glass-strong:
    linear-gradient(145deg, rgba(54, 229, 237, 0.12), rgba(255, 255, 255, 0.035) 48%, rgba(245, 73, 183, 0.05) 78%, rgba(0, 0, 0, 0.16)),
    rgba(3, 11, 24, 0.52);
  --nf-overlay-glass: var(--nf-glass-strong);
  --nf-shell-glass:
    linear-gradient(145deg, rgba(44, 225, 232, 0.11), rgba(255, 255, 255, 0.025) 52%, rgba(245, 73, 183, 0.035) 80%, rgba(0, 0, 0, 0.14)),
    rgba(3, 11, 23, 0.42);
  --nf-glass-soft:
    linear-gradient(145deg, rgba(18, 60, 77, 0.30), rgba(7, 15, 33, 0.18)),
    rgba(3, 12, 26, 0.24);
  --nf-control:
    linear-gradient(180deg, rgba(24, 65, 82, 0.56), rgba(4, 14, 30, 0.42)),
    rgba(4, 14, 29, 0.42);
  --nf-control-hover:
    linear-gradient(180deg, rgba(34, 66, 93, 0.84), rgba(8, 23, 44, 0.72)),
    rgba(8, 21, 42, 0.74);
  --nf-button-glass:
    linear-gradient(112deg, transparent 18%, rgba(44, 225, 232, 0.24) 40%, rgba(245, 73, 183, 0.12) 50%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
    rgba(4, 15, 31, 0.42);
  --nf-shadow-card:
    0 20px 54px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(44, 225, 232, 0.07),
    0 0 26px rgba(44, 225, 232, 0.055),
    inset 0 1px 0 rgba(199, 252, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  --nf-shadow-float:
    0 30px 78px rgba(0, 0, 0, 0.52),
    0 0 38px rgba(44, 225, 232, 0.10),
    0 0 22px rgba(245, 73, 183, 0.05),
    inset 0 1px 0 rgba(204, 252, 255, 0.20);
  --nf-shadow-control:
    0 7px 18px rgba(0, 0, 0, 0.23),
    0 0 14px rgba(44, 225, 232, 0.07),
    inset 0 1px 0 rgba(204, 252, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

html,
body {
  min-height: 100%;
  background-color: var(--nf-bg) !important;
  color: var(--nf-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body {
  position: relative;
  background:
    linear-gradient(124deg, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(238deg, rgba(190, 198, 202, 0.14), transparent 40%),
    linear-gradient(18deg, rgba(171, 178, 184, 0.22), transparent 45%),
    linear-gradient(140deg, #e9e9eb 0%, #f7f7f8 48%, #efedef 100%) !important;
  background-attachment: scroll !important;
  color: var(--nf-ink) !important;
}

html.dark body {
  background:
    linear-gradient(124deg, rgba(0, 225, 235, 0.21), transparent 35%),
    linear-gradient(238deg, rgba(98, 71, 196, 0.17), transparent 40%),
    linear-gradient(18deg, rgba(244, 57, 178, 0.14), transparent 45%),
    linear-gradient(140deg, #01040a 0%, #04101f 48%, #0b0715 100%) !important;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
}

body::before {
  z-index: 0;
  inset: -10vmax;
  background:
    linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, 0.58) 27%, rgba(146, 153, 161, 0.17) 42%, transparent 58%),
    linear-gradient(232deg, transparent 18%, rgba(176, 183, 189, 0.19) 38%, transparent 57%),
    linear-gradient(18deg, transparent 20%, rgba(160, 168, 176, 0.21) 42%, transparent 62%),
    linear-gradient(294deg, transparent 16%, rgba(207, 211, 215, 0.25) 37%, transparent 57%);
  background-size: 132% 132%, 138% 138%, 142% 142%, 136% 136%;
  opacity: 0.94;
  will-change: transform;
  animation: nf-light-field 18s cubic-bezier(0.45, 0.04, 0.25, 1) infinite alternate;
}

html.dark body::before {
  background:
    linear-gradient(112deg, transparent 16%, rgba(92, 246, 249, 0.21) 28%, rgba(0, 103, 151, 0.12) 36%, transparent 48%),
    linear-gradient(232deg, transparent 22%, rgba(0, 222, 235, 0.25) 36%, transparent 51%),
    linear-gradient(18deg, transparent 25%, rgba(245, 63, 184, 0.19) 40%, transparent 55%),
    linear-gradient(294deg, transparent 22%, rgba(126, 79, 220, 0.12) 36%, transparent 50%);
  opacity: 0.82;
  animation-name: nf-dark-field;
  animation-duration: 14s;
}

body::after {
  z-index: 0;
  inset: -56px;
  background-image:
    linear-gradient(rgba(70, 73, 79, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 73, 79, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 96%);
  opacity: 0.46;
  will-change: transform;
}

html.dark body::after {
  background-image:
    linear-gradient(rgba(43, 221, 232, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 221, 232, 0.055) 1px, transparent 1px),
    linear-gradient(transparent 50%, rgba(245, 73, 183, 0.018) 50%);
  background-size: 56px 56px, 56px 56px, 100% 4px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.58));
  opacity: 0.74;
  animation: nf-grid-drift 24s linear infinite;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

#app > .min-h-screen,
#app .min-h-screen.bg-gray-50,
#app .min-h-screen.dark\:bg-dark-950 {
  background-color: transparent !important;
}

html:not(.dark) #app > .min-h-screen {
  background-image: none !important;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden {
  opacity: 0.82;
  transform-origin: center;
  will-change: transform;
  animation: nf-home-ambient 22s cubic-bezier(0.45, 0.04, 0.25, 1) infinite alternate;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden > :nth-child(1) {
  background: rgba(134, 144, 153, 0.16) !important;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden > :nth-child(2) {
  background: rgba(170, 175, 181, 0.14) !important;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden > :nth-child(3) {
  background: rgba(112, 123, 132, 0.10) !important;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden > :nth-child(4) {
  background: rgba(193, 197, 201, 0.12) !important;
}

html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden > :nth-child(5) {
  background-image:
    linear-gradient(rgba(70, 76, 84, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 76, 84, 0.024) 1px, transparent 1px) !important;
}

html:not(.dark) #app main > .mx-auto.max-w-6xl > .mb-12.grid > .group {
  border-color: var(--nf-highlight) !important;
  background: var(--nf-glass-strong) !important;
  box-shadow: var(--nf-shadow-card) !important;
  backdrop-filter: var(--nf-blur);
  -webkit-backdrop-filter: var(--nf-blur);
}

html:not(.dark) #app main > .mx-auto.max-w-6xl > .mb-16.flex.flex-wrap > div {
  border-color: var(--nf-line) !important;
  background: var(--nf-glass-soft) !important;
  box-shadow: var(--nf-shadow-control) !important;
}

html:not(.dark) #app main > .mx-auto.max-w-6xl > .mb-16.flex.flex-wrap > div > span:last-child {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--nf-ink-muted) !important;
}

#app .bg-mesh-gradient {
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(238deg, rgba(202, 185, 225, 0.08), transparent 44%) !important;
}

html.dark #app .bg-mesh-gradient {
  background:
    linear-gradient(122deg, rgba(0, 218, 231, 0.07), transparent 43%),
    linear-gradient(238deg, rgba(174, 64, 235, 0.08), transparent 45%) !important;
}

::selection {
  background: rgba(55, 58, 64, 0.18);
  color: var(--nf-ink);
}

/* Typography and brand color */
#app :is(.page-title, .modal-title, .stat-value, h1, h2, h3) {
  color: var(--nf-ink);
  letter-spacing: 0;
}

#app :is(.page-description, .stat-label, .input-hint, .empty-state-description) {
  color: var(--nf-ink-muted);
}

html.dark #app :is(.page-title, .modal-title, h1, h2) {
  text-shadow: 0 0 18px rgba(44, 225, 232, 0.12), 0 0 30px rgba(245, 73, 183, 0.04);
}

#app :is(.text-primary-500, .text-primary-600, .text-primary-700) {
  color: var(--nf-link) !important;
}

html.dark #app :is(.text-primary-300, .text-primary-400, .text-primary-500, .text-primary-600, .text-primary-700) {
  color: var(--nf-link) !important;
}

#app :is(.border-primary-400, .border-primary-500, .border-primary-600) {
  border-color: var(--nf-line-strong) !important;
}

/* Official header and sidebar */
#app header.glass {
  isolation: isolate;
  border-bottom: 1px solid var(--nf-line) !important;
  background: var(--nf-shell-glass) !important;
  box-shadow:
    0 10px 32px rgba(28, 31, 36, 0.08),
    inset 0 1px 0 var(--nf-highlight) !important;
  backdrop-filter: var(--nf-blur-strong) !important;
  -webkit-backdrop-filter: var(--nf-blur-strong) !important;
}

html.dark #app header.glass {
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.38),
    0 2px 22px rgba(44, 225, 232, 0.16),
    inset 0 1px 0 rgba(198, 250, 255, 0.22) !important;
}

#app .sidebar {
  isolation: isolate;
  border-right: 1px solid var(--nf-line) !important;
  background: var(--nf-shell-glass) !important;
  box-shadow:
    14px 0 42px rgba(28, 31, 36, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: var(--nf-blur-strong);
  -webkit-backdrop-filter: var(--nf-blur-strong);
}

html.dark #app .sidebar {
  box-shadow:
    15px 0 46px rgba(0, 0, 0, 0.40),
    2px 0 24px rgba(44, 225, 232, 0.15),
    inset -1px 0 0 rgba(185, 247, 252, 0.18) !important;
}

#app header.glass::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82) 28%, rgba(75, 78, 84, 0.16) 68%, transparent);
  content: "";
  pointer-events: none;
}

#app .sidebar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.80) 24%, rgba(75, 78, 84, 0.15) 72%, transparent);
  content: "";
  pointer-events: none;
}

html.dark #app header.glass::after {
  background: linear-gradient(90deg, transparent, rgba(44, 225, 232, 0.50) 30%, rgba(245, 73, 183, 0.28) 72%, transparent);
}

html.dark #app .sidebar::after {
  background: linear-gradient(180deg, transparent, rgba(44, 225, 232, 0.46) 28%, rgba(245, 73, 183, 0.25) 76%, transparent);
}

#app :is(.sidebar-header, .sidebar > .mt-auto) {
  border-color: var(--nf-line) !important;
}

#app .sidebar-logo {
  border: 1px solid var(--nf-highlight);
  background: var(--nf-control);
  box-shadow: var(--nf-shadow-control) !important;
}

#app .sidebar-link {
  border: 1px solid transparent;
  color: var(--nf-ink-muted);
  background-position: 138% 0, 0 0;
  background-size: 240% 100%, 100% 100%;
  transition:
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1.25),
    background-position 360ms ease-out,
    border-color 220ms ease,
    box-shadow 260ms ease,
    color 180ms ease;
}

#app .sidebar-link:hover {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: var(--nf-button-glass) !important;
  background-position: -38% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 8px 18px rgba(28, 31, 36, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 0 0 1px rgba(45, 48, 54, 0.07) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(2px) scale(1.006);
}

html.dark #app .sidebar-link:hover {
  border-color: rgba(44, 225, 232, 0.42) !important;
  background: var(--nf-button-glass) !important;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(44, 225, 232, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

#app :is(.sidebar-link-active, .sidebar-link.router-link-active) {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: var(--nf-button-glass) !important;
  background-position: 84% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 9px 22px rgba(28, 31, 36, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(45, 48, 54, 0.09),
    inset 0 -1px 0 rgba(45, 48, 54, 0.11) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.dark #app :is(.sidebar-link-active, .sidebar-link.router-link-active) {
  border-color: rgba(44, 225, 232, 0.56) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(44, 225, 232, 0.17),
    0 0 14px rgba(245, 73, 183, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.23),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

#app .sidebar-link:active {
  filter: brightness(0.98);
  transform: translateX(1px) scale(0.98) !important;
  transition-duration: 90ms !important;
}

#app .sidebar-link > :is(svg, .sidebar-svg-icon) {
  color: currentColor;
}

html.dark #app .sidebar-link > :is(svg, .sidebar-svg-icon) {
  color: currentColor;
  filter: none;
}

/* Content surfaces use a quiet standard material beneath the functional glass layer. */
#app :is(.card, .glass-card, .card-glass, .stat-card, .dashboard-card, .settings-card, .table-scroll-container) {
  border: 1px solid var(--nf-line) !important;
  border-radius: var(--nf-radius-card) !important;
  background: var(--nf-glass) !important;
  box-shadow: var(--nf-shadow-card) !important;
  backdrop-filter: var(--nf-blur);
  -webkit-backdrop-filter: var(--nf-blur);
}

#app :is(.glass-card, .card-glass) {
  border-color: var(--nf-highlight) !important;
}

#app :is(.card-header, .card-footer, .modal-header, .modal-footer, .dialog-header, .dialog-footer) {
  border-color: var(--nf-line) !important;
}

#app :is(.card-header, .modal-header, .dialog-header) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.23), transparent);
}

html.dark #app :is(.card-header, .modal-header, .dialog-header) {
  background: linear-gradient(180deg, rgba(44, 225, 232, 0.11), rgba(245, 73, 183, 0.025) 58%, transparent);
}

#app :is(.card-footer, .modal-footer, .dialog-footer) {
  background: rgba(255, 255, 255, 0.10) !important;
}

html.dark #app :is(.card-footer, .modal-footer, .dialog-footer) {
  background: rgba(3, 11, 26, 0.24) !important;
}

#app :is(.card, .glass-card, .card-glass) :is(.bg-gray-50, .bg-gray-100) {
  border-color: var(--nf-line) !important;
  background: var(--nf-glass-soft) !important;
}

#app main > * {
  animation: nf-content-enter 420ms cubic-bezier(0.22, 0.75, 0.25, 1) both;
}

@media (hover: hover) {
  #app :is(.card-hover, .glass-card):hover {
    border-color: var(--nf-line-strong) !important;
    box-shadow:
      var(--nf-shadow-card),
      0 0 26px rgba(35, 38, 44, 0.08) !important;
    transform: translateY(-2px);
  }

  html.dark #app :is(.card-hover, .glass-card):hover {
    box-shadow:
      var(--nf-shadow-card),
      0 0 30px rgba(44, 225, 232, 0.18),
      0 0 18px rgba(245, 73, 183, 0.08) !important;
  }
}

/* Buttons */
:is(#app, .modal-content, .dialog-container) .btn {
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius-control);
  color: var(--nf-ink);
  letter-spacing: 0;
}

:is(#app, .modal-content, .dialog-container) :where(
  .btn:not(.btn-ghost),
  button[class~="text-white"]:not([role="switch"]):not(.rounded-full),
  a[class~="text-white"]
) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: var(--nf-button-glass) !important;
  background-position: 138% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 7px 18px rgba(28, 31, 36, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(45, 48, 54, 0.08),
    inset 0 -1px 0 rgba(45, 48, 54, 0.12) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1.25),
    background-position 360ms ease-out,
    border-color 220ms ease,
    box-shadow 260ms ease !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :where(
  .btn:not(.btn-ghost),
  button[class~="text-white"]:not([role="switch"]):not(.rounded-full),
  a[class~="text-white"]
) {
  border-color: rgba(44, 225, 232, 0.32) !important;
  background: var(--nf-button-glass) !important;
  background-position: 138% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(44, 225, 232, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.21),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

:is(#app, .modal-content, .dialog-container) .btn-ghost {
  border-color: transparent;
  background: transparent !important;
  color: var(--nf-ink-muted) !important;
  box-shadow: none;
}

:is(#app, .modal-content, .dialog-container) :is(.btn-primary, button.bg-primary-500:not(.rounded-full), button.bg-primary-600:not(.rounded-full), a.bg-primary-500, a.bg-primary-600) {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: var(--nf-button-glass) !important;
  background-position: 138% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(.btn-primary, button.bg-primary-500:not(.rounded-full), button.bg-primary-600:not(.rounded-full), a.bg-primary-500, a.bg-primary-600) {
  border-color: rgba(44, 225, 232, 0.40) !important;
  background: var(--nf-button-glass) !important;
  background-position: 138% 0, 0 0 !important;
  background-size: 240% 100%, 100% 100% !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 0 17px rgba(44, 225, 232, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

:is(#app, .modal-content, .dialog-container) .btn-danger {
  color: var(--nf-danger) !important;
}

:is(#app, .modal-content, .dialog-container) :is(.btn-success, .btn-warning, .btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay) {
  color: var(--nf-ink) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) .btn-danger {
  color: var(--nf-danger) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(.btn-success, .btn-warning, .btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay) {
  color: var(--nf-ink) !important;
}

:is(#app, .modal-content, .dialog-container) :is(.btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay) * {
  color: inherit !important;
}

@media (hover: hover) {
  :is(#app, .modal-content, .dialog-container) .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.68) !important;
    background: var(--nf-button-glass) !important;
    color: var(--nf-ink) !important;
    box-shadow: var(--nf-shadow-control) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :is(#app, .modal-content, .dialog-container) :is(
    .btn:not(.btn-ghost),
    button[class~="text-white"]:not([role="switch"]):not(.rounded-full),
    a[class~="text-white"]
  ):hover {
    border-color: rgba(255, 255, 255, 0.90) !important;
    background: var(--nf-button-glass) !important;
    background-position: -38% 0, 0 0 !important;
    box-shadow:
      0 10px 24px rgba(28, 31, 36, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(45, 48, 54, 0.10) !important;
    transform: translateY(-1px) scale(1.012);
  }

  html.dark :is(#app, .modal-content, .dialog-container) :is(
    .btn:not(.btn-ghost),
    button[class~="text-white"]:not([role="switch"]):not(.rounded-full),
    a[class~="text-white"]
  ):hover {
    border-color: rgba(255, 255, 255, 0.27) !important;
    box-shadow:
      0 11px 25px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  }
}

:is(#app, .modal-content, .dialog-container) :is(
  .btn:not(.btn-ghost),
  button[class~="text-white"]:not([role="switch"]):not(.rounded-full),
  a[class~="text-white"]
):active:not(:disabled) {
  background-position: 18% 0, 0 0 !important;
  box-shadow:
    0 3px 9px rgba(28, 31, 36, 0.10),
    inset 0 2px 4px rgba(45, 48, 54, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  filter: brightness(0.98);
  transform: translateY(0) scale(0.968) !important;
  transition-duration: 90ms !important;
}

:is(#app, .modal-content, .dialog-container) .btn:disabled {
  box-shadow: none !important;
  filter: saturate(0.55);
}

:is(#app, .modal-content, .dialog-container) :is(.btn, .select-trigger, .input):focus-visible {
  outline: none;
  border-color: var(--nf-line-strong) !important;
  box-shadow: 0 0 0 4px rgba(61, 65, 72, 0.14), var(--nf-shadow-control) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(.btn, .select-trigger, .input):focus-visible {
  box-shadow: 0 0 0 4px rgba(44, 225, 232, 0.14), 0 0 22px rgba(44, 225, 232, 0.08), var(--nf-shadow-control) !important;
}

/* Home illustrations and model marks use one material instead of brand-color tiles. */
#app main > .mx-auto.max-w-6xl > .mb-12.grid > .group > .mb-4.flex.h-12.w-12,
#app main > .mx-auto.max-w-6xl > .mb-16.flex.flex-wrap > div > div:first-child {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.10) 56%, rgba(255, 255, 255, 0.22)),
    rgba(255, 255, 255, 0.12) !important;
  color: #4e5259 !important;
  box-shadow:
    0 9px 22px rgba(28, 31, 36, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(45, 48, 54, 0.10) !important;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

#app main > .mx-auto.max-w-6xl > .mb-12.grid > .group > .mb-4.flex.h-12.w-12 > svg,
#app main > .mx-auto.max-w-6xl > .mb-16.flex.flex-wrap > div > div:first-child > span {
  color: inherit !important;
}

html.dark #app main > .mx-auto.max-w-6xl > .mb-12.grid > .group > .mb-4.flex.h-12.w-12,
html.dark #app main > .mx-auto.max-w-6xl > .mb-16.flex.flex-wrap > div > div:first-child {
  border-color: rgba(44, 225, 232, 0.44) !important;
  background:
    linear-gradient(145deg, rgba(44, 225, 232, 0.18), rgba(255, 255, 255, 0.035) 48%, rgba(4, 15, 31, 0.58)),
    rgba(4, 15, 31, 0.48) !important;
  color: #69eef5 !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.30),
    0 0 17px rgba(44, 225, 232, 0.13),
    inset 0 1px 0 rgba(205, 252, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

/* Initial avatars share the same neutral glass; uploaded photos keep their original color. */
#app div.overflow-hidden.bg-gradient-to-br.from-primary-500.to-primary-600:has(> :is(img, span)),
:is(#app, .modal-content, .dialog-container) div.rounded-full.bg-primary-100:has(> span.font-medium),
#app a.rounded-full.bg-gray-900 > span.rounded-full.bg-gradient-to-br.from-primary-400.to-primary-600 {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 7px 18px rgba(28, 31, 36, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 0 0 1px rgba(45, 48, 54, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.dark #app div.overflow-hidden.bg-gradient-to-br.from-primary-500.to-primary-600:has(> :is(img, span)),
html.dark :is(#app, .modal-content, .dialog-container) div.rounded-full.bg-primary-100:has(> span.font-medium),
html.dark #app a.rounded-full.bg-gray-900 > span.rounded-full.bg-gradient-to-br.from-primary-400.to-primary-600 {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#app header.glass .bg-primary-50,
#app a.rounded-full.bg-gray-900 {
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow: var(--nf-shadow-control) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app header.glass .bg-primary-50 :is(.text-primary-300, .text-primary-400, .text-primary-500, .text-primary-600, .text-primary-700) {
  color: var(--nf-ink) !important;
}

html.dark #app header.glass .bg-primary-50,
html.dark #app a.rounded-full.bg-gray-900 {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: var(--nf-button-glass) !important;
}

/* Inputs, selects and date controls */
:is(#app, .modal-content, .dialog-container) :is(.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], textarea, select, .select-trigger, .date-picker-trigger, .date-picker-input) {
  border-color: var(--nf-line) !important;
  border-radius: var(--nf-radius-control);
  background: var(--nf-control) !important;
  color: var(--nf-ink) !important;
  box-shadow:
    inset 0 1px 0 var(--nf-highlight),
    0 4px 13px rgba(28, 31, 36, 0.06) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(#app, .modal-content, .dialog-container) :is(input, textarea)::placeholder {
  color: var(--nf-ink-faint) !important;
}

:is(#app, .modal-content, .dialog-container) :is(.input, input, textarea, select, .select-trigger, .date-picker-trigger):focus,
:is(#app, .modal-content, .dialog-container) .select-trigger-open {
  outline: none;
  border-color: var(--nf-line-strong) !important;
  box-shadow: 0 0 0 4px rgba(61, 65, 72, 0.13), var(--nf-shadow-control) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(.input, input, textarea, select, .select-trigger, .date-picker-trigger):focus,
html.dark :is(#app, .modal-content, .dialog-container) .select-trigger-open {
  box-shadow: 0 0 0 4px rgba(44, 225, 232, 0.12), 0 0 20px rgba(44, 225, 232, 0.07), var(--nf-shadow-control) !important;
}

:is(#app, .modal-content, .dialog-container) :is(input, textarea, select):disabled {
  opacity: 0.58;
  box-shadow: none !important;
}

:is(#app, .modal-content, .dialog-container) :is(.input-label, .date-picker-label) {
  color: var(--nf-ink-muted) !important;
}

/* Native official switches: state comes from the component itself. */
:is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"],
  button.relative.inline-flex.h-5.w-9.rounded-full,
  button.relative.inline-flex.h-6.w-11.rounded-full,
  button.relative.inline-flex.h-6.w-12.rounded-full
) {
  border-color: rgba(70, 73, 80, 0.20) !important;
  background: rgba(126, 129, 136, 0.30) !important;
  box-shadow:
    inset 0 2px 5px rgba(38, 41, 47, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

:is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"][aria-checked="true"],
  button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-600,
  button.relative.inline-flex.h-6.w-11.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-6.w-11.rounded-full.bg-primary-600,
  button.relative.inline-flex.h-6.w-12.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-6.w-12.rounded-full.bg-primary-600
) {
  border-color: rgba(255, 255, 255, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 48%),
    rgba(65, 68, 74, 0.70) !important;
  box-shadow:
    0 5px 14px rgba(28, 31, 36, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"],
  button.relative.inline-flex.h-5.w-9.rounded-full,
  button.relative.inline-flex.h-6.w-11.rounded-full,
  button.relative.inline-flex.h-6.w-12.rounded-full
) {
  border-color: rgba(72, 137, 166, 0.28) !important;
  background: rgba(17, 38, 57, 0.80) !important;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.34) !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"][aria-checked="true"],
  button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-600,
  button.relative.inline-flex.h-6.w-11.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-6.w-11.rounded-full.bg-primary-600,
  button.relative.inline-flex.h-6.w-12.rounded-full.bg-primary-500,
  button.relative.inline-flex.h-6.w-12.rounded-full.bg-primary-600
) {
  border-color: rgba(44, 225, 232, 0.46) !important;
  background:
    linear-gradient(180deg, rgba(219, 252, 255, 0.20), transparent 48%),
    linear-gradient(105deg, #21d6df, #3e83ff, #a650e2) !important;
  box-shadow:
    0 0 18px rgba(44, 225, 232, 0.24),
    inset 0 1px 0 rgba(226, 253, 255, 0.36) !important;
}

:is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"],
  button.relative.inline-flex.h-5.w-9.rounded-full,
  button.relative.inline-flex.h-6.w-11.rounded-full,
  button.relative.inline-flex.h-6.w-12.rounded-full
) > span {
  background: linear-gradient(145deg, #ffffff, #e3e3e6) !important;
  box-shadow:
    0 2px 7px rgba(28, 31, 36, 0.24),
    inset 0 1px 0 #fff !important;
}

html.dark :is(#app, .modal-content, .dialog-container) :is(
  button[role="switch"],
  button.relative.inline-flex.h-5.w-9.rounded-full,
  button.relative.inline-flex.h-6.w-11.rounded-full,
  button.relative.inline-flex.h-6.w-12.rounded-full
) > span {
  background: linear-gradient(145deg, #f2fdff, #b7dce7) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40), 0 0 8px rgba(44, 225, 232, 0.18) !important;
}

/* Tables stay dense and readable instead of turning every cell into glass. */
#app :is(.table-container, .table-wrapper) {
  border-color: var(--nf-line) !important;
  background: rgba(255, 255, 255, 0.10);
}

html.dark #app :is(.table-container, .table-wrapper) {
  background: rgba(4, 13, 28, 0.28);
}

#app table {
  border-color: var(--nf-line) !important;
}

#app table thead,
#app table thead tr,
#app table thead th,
#app .table th {
  border-color: var(--nf-line) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  color: var(--nf-ink-muted) !important;
}

html.dark #app table thead,
html.dark #app table thead tr,
html.dark #app table thead th,
html.dark #app .table th {
  background: rgba(3, 18, 35, 0.58) !important;
  color: var(--nf-ink-muted) !important;
}

#app table td,
#app .table td {
  border-color: rgba(70, 73, 80, 0.11) !important;
}

html.dark #app table td,
html.dark #app .table td {
  border-color: rgba(55, 188, 211, 0.11) !important;
}

#app table tbody tr {
  background: rgba(255, 255, 255, 0.30);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

#app table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.14);
}

html.dark #app table tbody tr {
  background: rgba(5, 15, 31, 0.30);
}

html.dark #app table tbody tr:nth-child(even) {
  background: rgba(10, 26, 47, 0.33);
}

#app table tbody tr:hover {
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow: inset 3px 0 0 rgba(63, 67, 74, 0.40);
}

html.dark #app table tbody tr:hover {
  background: rgba(12, 48, 68, 0.58) !important;
  box-shadow: inset 3px 0 0 rgba(44, 225, 232, 0.62), 0 0 18px rgba(44, 225, 232, 0.04);
}

#app table :is(th.sticky, td.sticky, .sticky-header-cell.sticky-col, tbody .sticky-col) {
  background: #f2f2f4 !important;
  box-shadow: -8px 0 18px rgba(28, 31, 36, 0.06);
}

html.dark #app table :is(th.sticky, td.sticky, .sticky-header-cell.sticky-col, tbody .sticky-col) {
  background: rgba(3, 16, 31, 0.84) !important;
  box-shadow: -8px 0 20px rgba(0, 0, 0, 0.24);
}

#app table .sticky-col-right {
  box-shadow: -16px 0 24px rgba(28, 31, 36, 0.12) !important;
}

html.dark #app table .sticky-col-right {
  box-shadow: -18px 0 28px rgba(0, 0, 0, 0.40), -1px 0 0 rgba(44, 225, 232, 0.08) !important;
}

#app table tbody tr:hover :is(th.sticky, td.sticky, .sticky-col) {
  background: rgba(245, 245, 247, 0.96) !important;
}

html.dark #app table tbody tr:hover :is(th.sticky, td.sticky, .sticky-col) {
  background: rgba(10, 44, 63, 0.97) !important;
}

#app nav + div.border-t,
#app .table-page-layout > .layout-section-fixed:last-child > div {
  border-color: var(--nf-line) !important;
  background: var(--nf-glass-soft) !important;
}

/* Tabs */
#app :is(.tabs, .settings-tabs-shell) {
  border: 1px solid var(--nf-line) !important;
  background: var(--nf-glass-strong) !important;
  box-shadow: var(--nf-shadow-control) !important;
  backdrop-filter: var(--nf-blur);
  -webkit-backdrop-filter: var(--nf-blur);
}

#app :is(.tab, .settings-tab) {
  color: var(--nf-ink-muted) !important;
}

#app :is(.tab-active, .settings-tab-active) {
  border-color: rgba(255, 255, 255, 0.74) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow: var(--nf-shadow-control) !important;
}

html.dark #app :is(.tab-active, .settings-tab-active) {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow: var(--nf-shadow-control) !important;
}

/* Teleported menus, selects, date pickers and dialogs */
:where(
  .dropdown,
  .select-dropdown,
  .select-dropdown-portal,
  .date-picker-dropdown,
  .action-menu-content,
  #app .relative > div.absolute.z-50,
  .proxy-selector-menu,
  [role="listbox"]
) {
  border: 1px solid var(--nf-line-strong) !important;
  border-radius: 13px !important;
  background: var(--nf-overlay-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow: var(--nf-shadow-float) !important;
  backdrop-filter: var(--nf-blur-strong) !important;
  -webkit-backdrop-filter: var(--nf-blur-strong) !important;
}

#app .relative > div.absolute.z-50 button:not(.btn) {
  color: var(--nf-ink-muted) !important;
}

#app .account-tools-menu-item .account-tools-menu-icon {
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink-muted) !important;
  box-shadow: var(--nf-shadow-control) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.dark #app .account-tools-menu-item .account-tools-menu-icon {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--nf-ink-muted) !important;
}

#app .account-tools-menu-item > span.rounded-full {
  border: 1px solid var(--nf-line) !important;
  background: var(--nf-button-glass) !important;
  color: var(--nf-ink) !important;
}

html.dark #app .account-tools-menu-item > span.rounded-full {
  color: var(--nf-ink) !important;
}

@media (hover: hover) {
  #app .relative > div.absolute.z-50 button:not(.btn):hover {
    background: var(--nf-button-glass) !important;
    color: var(--nf-ink) !important;
  }
}

:where(.dropdown-item, .select-option, .date-picker-preset, [role="option"]) {
  color: var(--nf-ink-muted) !important;
}

:where(.dropdown-item, .select-option, .date-picker-preset, [role="option"]):hover,
:where(.select-option-selected, .select-option-focused, .date-picker-preset-active) {
  background: rgba(255, 255, 255, 0.34) !important;
  color: var(--nf-ink) !important;
}

html.dark :where(.dropdown-item, .select-option, .date-picker-preset, [role="option"]):hover,
html.dark :where(.select-option-selected, .select-option-focused, .date-picker-preset-active) {
  background: rgba(15, 64, 80, 0.62) !important;
  color: var(--nf-ink) !important;
}

.select-search {
  border-color: var(--nf-line) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

html.dark .select-search {
  background: rgba(5, 16, 33, 0.52) !important;
}

.select-search-input {
  color: var(--nf-ink) !important;
}

:where(.modal-overlay, .dialog-overlay) {
  background: rgba(35, 36, 40, 0.24) !important;
  backdrop-filter: blur(7px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(125%) !important;
}

html.dark :where(.modal-overlay, .dialog-overlay) {
  background: rgba(0, 4, 13, 0.66) !important;
}

:where(.modal-content, .dialog-container, .toast) {
  border: 1px solid var(--nf-line-strong) !important;
  border-radius: var(--nf-radius-card) !important;
  background: var(--nf-overlay-glass) !important;
  color: var(--nf-ink) !important;
  box-shadow: var(--nf-shadow-float) !important;
  backdrop-filter: var(--nf-blur-strong);
  -webkit-backdrop-filter: var(--nf-blur-strong);
}

:where(.modal-content, .dialog-container) :is(.modal-header, .modal-footer, .dialog-header, .dialog-footer) {
  border-color: var(--nf-line) !important;
}

:where(.modal-content, .dialog-container) :is(.modal-header, .dialog-header) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.23), transparent);
}

html.dark :where(.modal-content, .dialog-container) :is(.modal-header, .dialog-header) {
  background: linear-gradient(180deg, rgba(92, 224, 242, 0.055), transparent);
}

:where(.modal-content, .dialog-container) :is(.modal-footer, .dialog-footer) {
  background: rgba(255, 255, 255, 0.30) !important;
}

html.dark :where(.modal-content, .dialog-container) :is(.modal-footer, .dialog-footer) {
  background: rgba(3, 11, 26, 0.24) !important;
}

:where(.modal-content, .dialog-container) :is(.modal-title, h1, h2, h3) {
  color: var(--nf-ink) !important;
  letter-spacing: 0;
}

:where(.modal-content, .dialog-container) :is(.input-label, .input-hint) {
  color: var(--nf-ink-muted) !important;
}

:where(.toast) {
  border-left-width: 4px !important;
}

/* Semantic colors remain distinct in both themes. */
#app :is(.badge-success, .stat-trend-up, .text-emerald-600, .text-green-600) {
  color: var(--nf-success) !important;
}

#app :is(.badge-warning, .text-amber-600, .text-yellow-600) {
  color: var(--nf-warning) !important;
}

#app :is(.badge-danger, .stat-trend-down, .text-red-600, .text-rose-600) {
  color: var(--nf-danger) !important;
}

html.dark #app :is(.text-emerald-300, .text-emerald-400, .text-emerald-500, .text-emerald-600, .text-green-400) {
  color: var(--nf-success) !important;
}

html.dark #app :is(.text-amber-300, .text-amber-400, .text-amber-500, .text-amber-600, .text-yellow-400) {
  color: var(--nf-warning) !important;
}

html.dark #app :is(.text-red-300, .text-red-400, .text-red-500, .text-red-600, .text-rose-400) {
  color: var(--nf-danger) !important;
}

#app :is(.code, code:not([class])) {
  border: 1px solid var(--nf-line);
  background: rgba(255, 255, 255, 0.24) !important;
  color: var(--nf-ink) !important;
}

html.dark #app :is(.code, code:not([class])) {
  background: rgba(6, 23, 43, 0.68) !important;
  color: var(--nf-ink) !important;
}

#app .code-block {
  border: 1px solid var(--nf-line);
  background: rgba(5, 15, 30, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(159, 228, 245, 0.08);
}

/* Scrollbars */
#app,
#app *,
:where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"]) {
  scrollbar-color: rgba(73, 76, 83, 0.32) transparent;
  scrollbar-width: thin;
}

html.dark #app,
html.dark #app *,
html.dark :where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"]) {
  scrollbar-color: rgba(45, 208, 220, 0.34) transparent;
}

#app::-webkit-scrollbar,
#app *::-webkit-scrollbar,
:where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"])::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#app::-webkit-scrollbar-track,
#app *::-webkit-scrollbar-track,
:where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"])::-webkit-scrollbar-track {
  background: transparent;
}

#app::-webkit-scrollbar-thumb,
#app *::-webkit-scrollbar-thumb,
:where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"])::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(73, 76, 83, 0.28);
  background-clip: padding-box;
}

html.dark #app::-webkit-scrollbar-thumb,
html.dark #app *::-webkit-scrollbar-thumb,
html.dark :where(.dropdown, .select-dropdown, .select-dropdown-portal, .date-picker-dropdown, .action-menu-content, [role="listbox"])::-webkit-scrollbar-thumb {
  background: rgba(45, 208, 220, 0.30);
  background-clip: padding-box;
}

@keyframes nf-light-field {
  0% { transform: translate3d(-11%, -7%, 0) scale(1.07) rotate(-1.6deg); }
  36% { transform: translate3d(10%, -4%, 0) scale(1.11) rotate(1.1deg); }
  72% { transform: translate3d(-7%, 10%, 0) scale(1.085) rotate(1.5deg); }
  100% { transform: translate3d(11%, 7%, 0) scale(1.12) rotate(-1deg); }
}

@keyframes nf-home-ambient {
  0% { transform: translate3d(-4%, -2%, 0) scale(1.08); }
  46% { transform: translate3d(3%, 3%, 0) scale(1.11); }
  100% { transform: translate3d(5%, -3%, 0) scale(1.09); }
}

@keyframes nf-dark-field {
  0% { transform: translate3d(-9%, -6%, 0) scale(1.04) rotate(-1.4deg); }
  36% { transform: translate3d(8%, -3%, 0) scale(1.08) rotate(0.9deg); }
  72% { transform: translate3d(-5%, 8%, 0) scale(1.055) rotate(1.3deg); }
  100% { transform: translate3d(9%, 6%, 0) scale(1.09) rotate(-0.8deg); }
}

@keyframes nf-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(56px, 56px, 0); }
}

@keyframes nf-content-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1023px) {
  body {
    background-attachment: scroll !important;
  }

  #app .sidebar {
    box-shadow: var(--nf-shadow-float) !important;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* DataTable switches to desktop at 768px while TablePageLayout waits until 1024px. */
@media (min-width: 768px) and (max-width: 1023px) {
  #app .table-page-layout.mobile-mode .layout-section-scrollable {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow: hidden !important;
    border: 1px solid var(--nf-line) !important;
    background: var(--nf-glass) !important;
    box-shadow: var(--nf-shadow-card) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container .table-wrapper {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-inline: contain;
  }
}

/* A desktop sidebar leaves too little room for filter and action rows at lg. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #app .table-page-layout > .layout-section-fixed .flex.flex-col.justify-between.gap-4.lg\:flex-row {
    flex-direction: column !important;
  }

  #app .table-page-layout > .layout-section-fixed .flex.w-full.flex-shrink-0.flex-wrap.items-center.justify-end.gap-3.lg\:w-auto {
    width: 100% !important;
  }
}

/* Keep the official home hero columns on one visual baseline. */
@media (min-width: 1024px) {
  #app main > .mx-auto.max-w-6xl > .mb-12.flex[class~="lg:flex-row"] {
    align-items: flex-start !important;
  }
}

  @media (max-width: 640px) {
  :root {
    --nf-radius-card: 14px;
    --nf-radius-control: 10px;
    --nf-blur: blur(9px) saturate(165%);
    --nf-blur-strong: blur(12px) saturate(175%);
  }

  body::before {
    opacity: 0.86;
    animation-duration: 22s;
  }

  #app header.glass > div {
    min-width: 0;
  }

  #app .settings-tabs-shell {
    position: sticky;
    overflow: hidden;
  }

  #app .settings-tabs-shell::after {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 3;
    width: 34px;
    border-radius: 0 11px 11px 0;
    background: linear-gradient(90deg, transparent, rgba(244, 244, 246, 0.94));
    content: "";
    pointer-events: none;
  }

  html.dark #app .settings-tabs-shell::after {
    background: linear-gradient(90deg, transparent, rgba(6, 17, 35, 0.96));
  }

  #app :is(.settings-tabs-scroll, .tabs) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  #app .settings-tab {
    scroll-snap-align: center;
  }

  #app .card > .flex.items-center.gap-6:has(> .h-48.w-48) {
    flex-direction: column;
    align-items: stretch;
  }

  #app .card > .flex.items-center.gap-6:has(> .h-48.w-48) > .h-48.w-48 {
    align-self: center;
    flex: 0 0 auto;
  }

  #app .card > .flex.items-center.gap-6:has(> .h-48.w-48) > .max-h-48 {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .space-y-3 > .rounded-lg.border.bg-white {
    border: 1px solid var(--nf-line) !important;
    border-radius: 12px !important;
    background: var(--nf-glass) !important;
    box-shadow: var(--nf-shadow-card) !important;
    padding: 12px !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 7px !important;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > .flex.items-start.justify-between {
    display: grid;
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
    gap: 8px;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > .flex.items-start.justify-between > :last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .flex.min-h-0.flex-1.flex-col.overflow-hidden > .space-y-3 > .rounded-lg.border.bg-white {
    border: 1px solid var(--nf-line) !important;
    border-radius: 12px !important;
    background: var(--nf-glass) !important;
    box-shadow: var(--nf-shadow-card) !important;
    padding: 12px !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .flex.min-h-0.flex-1.flex-col.overflow-hidden > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 7px !important;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .flex.min-h-0.flex-1.flex-col.overflow-hidden > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > .flex.items-start.justify-between {
    display: grid;
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
    gap: 8px;
  }

  #app .table-page-layout.mobile-mode .table-scroll-container > .flex.min-h-0.flex-1.flex-col.overflow-hidden > .space-y-3 > .rounded-lg.border.bg-white > .space-y-3 > .flex.items-start.justify-between > :last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #app :is(.modal-content, .dialog-container) {
    max-width: calc(100vw - 16px);
  }

  #app .toast {
    left: 8px;
    right: 8px;
    min-width: 0;
    max-width: none;
  }

  :where(.dropdown, .select-dropdown-portal, .date-picker-dropdown) {
    max-width: calc(100vw - 16px) !important;
  }

  #app .relative > div.absolute.z-50 {
    position: fixed !important;
    right: auto !important;
    left: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html:not(.dark) #app > .relative.flex.min-h-screen.flex-col.overflow-hidden > .pointer-events-none.absolute.inset-0.overflow-hidden,
  #app main > * {
    animation: none !important;
  }

  #app *,
  #app *::before,
  #app *::after,
  :where(.modal-content, .dialog-container) *,
  :where(.modal-content, .dialog-container) *::before,
  :where(.modal-content, .dialog-container) *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --nf-glass: rgba(245, 245, 247, 0.94);
    --nf-glass-strong: rgba(248, 248, 250, 0.98);
    --nf-shell-glass: rgba(247, 247, 249, 0.96);
    --nf-button-glass: rgba(245, 245, 247, 0.96);
    --nf-overlay-glass: rgba(248, 248, 250, 0.98);
  }

  html.dark {
    --nf-glass: rgba(7, 17, 32, 0.95);
    --nf-glass-strong: rgba(7, 17, 32, 0.98);
    --nf-shell-glass: rgba(7, 17, 32, 0.96);
    --nf-button-glass: rgba(15, 27, 44, 0.97);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --nf-bg-elevated: rgba(249, 252, 255, 0.96);
    --nf-bg-strong: rgba(249, 252, 255, 0.98);
    --nf-glass: rgba(247, 251, 255, 0.96);
    --nf-glass-strong: rgba(249, 252, 255, 0.98);
    --nf-shell-glass: rgba(249, 252, 255, 0.96);
    --nf-glass-soft: rgba(239, 248, 255, 0.92);
    --nf-control: rgba(247, 251, 255, 0.96);
    --nf-control-hover: rgba(255, 255, 255, 0.99);
    --nf-button-glass: rgba(247, 251, 255, 0.96);
  }

  html.dark {
    --nf-bg-elevated: rgba(7, 18, 36, 0.97);
    --nf-bg-strong: rgba(7, 18, 36, 0.98);
    --nf-glass: rgba(6, 17, 35, 0.97);
    --nf-glass-strong: rgba(7, 18, 36, 0.99);
    --nf-shell-glass: rgba(7, 18, 36, 0.97);
    --nf-glass-soft: rgba(8, 23, 44, 0.94);
    --nf-control: rgba(8, 21, 41, 0.97);
    --nf-control-hover: rgba(12, 30, 53, 0.99);
    --nf-button-glass: rgba(15, 27, 44, 0.97);
  }
}