/* =====================================================================
   Innyx DS — implementação estática para o protótipo Jobyx
   Tokens portados de innyx-ds.pages.dev (v5.5) · skin "jobyx"
   Entradas da skin: brand #202020 · accent #EE5214 · neutral zinc
   ===================================================================== */

:root,
[data-skin="jobyx"] {
  color-scheme: light;

  /* ---- entradas da skin ---- */
  --nx-input-brand: #202020;
  --nx-input-accent: #EE5214;
  --nx-input-neutral: #71717a;

  /* ---- tipografia ---- */
  --nx-font-sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --nx-text-display: clamp(34px, 4.4vw, 58px);
  --nx-text-h1: 34px;
  --nx-text-h1-mobile: 27px;
  --nx-text-h2: clamp(22px, 2.4vw, 28px);
  --nx-text-number-xl: 34px;
  --nx-text-number-lg: 30px;
  --nx-text-section-title: 17px;
  --nx-text-card-title: 16px;
  --nx-text-body-lg: 16.5px;
  --nx-text-body: 15px;
  --nx-text-body-sm: 14px;
  --nx-text-ui: 13.5px;
  --nx-text-meta: 12.5px;
  --nx-text-meta-sm: 11.5px;
  --nx-text-label: 11px;

  /* ---- raios ---- */
  --nx-radius-xs: 6px;
  --nx-radius-sm: 8px;
  --nx-radius-md: 10px;
  --nx-radius-lg: 12px;
  --nx-radius-nav: 13px;
  --nx-radius-xl: 14px;
  --nx-radius-2xl: 16px;
  --nx-radius-3xl: 18px;
  --nx-radius-4xl: 20px;
  --nx-radius-5xl: 22px;
  --nx-radius-6xl: 24px;
  --nx-radius-7xl: 26px;
  --nx-radius-pill: 999px;

  /* ---- componentes ---- */
  --nx-button-h-sm: 32px;
  --nx-button-h: 38px;
  --nx-button-h-lg: 46px;
  --nx-button-h-cta: 54px;
  --nx-field-h: 40px;
  --nx-badge-h: 26px;
  --nx-chip-h: 36px;
  --nx-nav-item-h: 43px;
  --nx-sb-w: 266px;
  --nx-sb-w-collapsed: 77px;
  --nx-card-radius: 22px;
  --nx-card-pad: 20px;
  --nx-card-pad-lg: 24px;
  --nx-content-max: 1240px;

  /* ---- movimento ---- */
  --nx-ease: cubic-bezier(.22, .61, .36, 1);
  --nx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --nx-duration: .18s;
  --nx-duration-slow: .32s;

  /* ---- escalas (derivadas em OKLab) ---- */
  --nx-ink: #18181b;
  --nx-accent-50: color-mix(in oklab, #EE5214 6%, #fff);
  --nx-accent-100: color-mix(in oklab, #EE5214 12%, #fff);
  --nx-accent-200: color-mix(in oklab, #EE5214 24%, #fff);
  --nx-accent-300: color-mix(in oklab, #EE5214 42%, #fff);
  --nx-accent-500: #EE5214;
  --nx-accent-600: color-mix(in oklab, #EE5214 86%, #000);
  --nx-accent-700: color-mix(in oklab, #EE5214 72%, #000);

  /* ---- papéis semânticos ---- */
  --nx-page: #F5F6F8;
  --nx-surface: rgb(255 255 255 / .88);
  --nx-surface-strong: rgb(255 255 255 / .94);
  --nx-surface-solid: #ffffff;
  --nx-elevated: #ffffff;
  --nx-subtle: #F1F1F3;
  --nx-sunken: rgb(24 24 27 / .045);
  --nx-sunken-2: rgb(24 24 27 / .07);
  --nx-hover: rgb(24 24 27 / .05);
  --nx-inverse: #1f1f22;
  --nx-scrim: rgb(15 15 18 / .34);

  --nx-fg: #1d1d20;
  --nx-fg-secondary: #3a3a40;
  --nx-fg-subtle: #5d5e66;
  --nx-fg-muted: #8b8c94;
  --nx-fg-faint: #b4b5bb;
  --nx-fg-on-action: #ffffff;
  --nx-fg-on-accent: #ffffff;

  --nx-border: rgb(24 24 27 / .08);
  --nx-border-subtle: rgb(24 24 27 / .055);
  --nx-border-strong: rgb(24 24 27 / .15);

  --nx-action: #202020;
  --nx-action-hover: #000000;
  --nx-accent: #EE5214;
  --nx-accent-hover: #D9460C;
  --nx-accent-soft: color-mix(in oklab, #EE5214 10%, transparent);
  --nx-accent-fg: #C2410C;

  --nx-success: #15803d;
  --nx-success-soft: color-mix(in oklab, #15803d 10%, transparent);
  --nx-warning: #b45309;
  --nx-warning-soft: color-mix(in oklab, #d97706 12%, transparent);
  --nx-danger: #b91c1c;
  --nx-danger-soft: color-mix(in oklab, #b91c1c 9%, transparent);
  --nx-info: #1d4ed8;
  --nx-info-soft: color-mix(in oklab, #1d4ed8 9%, transparent);
  --nx-violet: #6d28d9;
  --nx-violet-soft: color-mix(in oklab, #6d28d9 9%, transparent);

  --nx-focus-ring: 0 0 0 3px color-mix(in oklab, #EE5214 26%, transparent);

  --nx-shadow-color: color-mix(in oklab, #71717a 38%, #000);
  --nx-shadow-xs: 0 1px 2px rgb(24 24 27 / .06);
  --nx-shadow-sm: 0 1px 2px rgb(24 24 27 / .05), 0 6px 16px -10px rgb(24 24 27 / .18);
  --nx-shadow-card: 0 24px 48px -32px color-mix(in oklab, var(--nx-shadow-color) 28%, transparent), 0 1px 2px rgb(24 24 27 / .04);
  --nx-shadow-card-lg: 0 30px 60px -34px color-mix(in oklab, var(--nx-shadow-color) 34%, transparent), 0 1px 2px rgb(24 24 27 / .05);
  --nx-shadow-popover: 0 30px 60px -30px color-mix(in oklab, var(--nx-shadow-color) 40%, transparent), 0 2px 6px rgb(24 24 27 / .06);
  --nx-shadow-inset: inset 0 1px 0 rgb(255 255 255 / .7);

  --nx-material-blur: 30px;
  --nx-material-saturate: 160%;

  --nx-halo-1: rgb(186 230 240 / .55);
  --nx-halo-2: rgb(255 214 196 / .55);
  --nx-halo-3: rgb(214 228 255 / .55);
  --nx-halo-4: rgb(215 244 228 / .45);
}

/* ---------------- tema escuro (escala de chumbo) ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --nx-page: #0D0E10;
  --nx-surface: rgb(26 27 31 / .82);
  --nx-surface-strong: rgb(28 29 33 / .92);
  --nx-surface-solid: #18191C;
  --nx-elevated: #1E1F23;
  --nx-subtle: #1E1F23;
  --nx-sunken: rgb(255 255 255 / .045);
  --nx-sunken-2: rgb(255 255 255 / .07);
  --nx-hover: rgb(255 255 255 / .06);
  --nx-inverse: #F4F4F5;
  --nx-scrim: rgb(0 0 0 / .55);

  --nx-fg: #F4F4F5;
  --nx-fg-secondary: #D4D4D8;
  --nx-fg-subtle: #A1A1AA;
  --nx-fg-muted: #7C7D86;
  --nx-fg-faint: #52535A;
  --nx-fg-on-action: #111113;

  --nx-border: rgb(255 255 255 / .08);
  --nx-border-subtle: rgb(255 255 255 / .05);
  --nx-border-strong: rgb(255 255 255 / .16);

  --nx-action: #F4F4F5;
  --nx-action-hover: #ffffff;
  --nx-accent: #FF6127;
  --nx-accent-hover: #FF7440;
  --nx-accent-soft: color-mix(in oklab, #FF6127 16%, transparent);
  --nx-accent-fg: #FF8A5C;
  --nx-accent-50: color-mix(in oklab, #FF6127 10%, #18191C);
  --nx-accent-100: color-mix(in oklab, #FF6127 16%, #18191C);
  --nx-accent-200: color-mix(in oklab, #FF6127 28%, #18191C);

  --nx-success: #4ade80;
  --nx-success-soft: color-mix(in oklab, #22c55e 16%, transparent);
  --nx-warning: #fbbf24;
  --nx-warning-soft: color-mix(in oklab, #f59e0b 16%, transparent);
  --nx-danger: #f87171;
  --nx-danger-soft: color-mix(in oklab, #ef4444 16%, transparent);
  --nx-info: #7aa2ff;
  --nx-info-soft: color-mix(in oklab, #3b82f6 18%, transparent);
  --nx-violet: #b69cff;
  --nx-violet-soft: color-mix(in oklab, #8b5cf6 18%, transparent);

  --nx-shadow-card: 0 24px 48px -28px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .02);
  --nx-shadow-card-lg: 0 30px 60px -30px rgb(0 0 0 / .8);
  --nx-shadow-popover: 0 30px 60px -24px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .06);
  --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --nx-shadow-inset: inset 0 1px 0 rgb(255 255 255 / .05);

  --nx-halo-1: rgb(40 90 110 / .32);
  --nx-halo-2: rgb(130 52 20 / .30);
  --nx-halo-3: rgb(40 60 120 / .30);
  --nx-halo-4: rgb(30 90 70 / .22);
}

/* ===================== base ===================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--nx-font-sans);
  font-size: var(--nx-text-body-sm);
  line-height: 1.5;
  color: var(--nx-fg);
  background: var(--nx-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in oklab, var(--nx-accent) 22%, transparent); }
:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); border-radius: var(--nx-radius-sm); }
.ti { font-size: 1.15em; line-height: 1; display: inline-block; vertical-align: -0.14em; }

/* scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--nx-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--nx-border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ===================== canvas + backdrop halo ===================== */
.nx-canvas { min-height: 100vh; position: relative; isolation: isolate; }
.nx-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nx-backdrop i { position: absolute; border-radius: 50%; filter: blur(40px); animation: nx-drift 26s var(--nx-ease) infinite alternate; }
.nx-backdrop i:nth-child(1) { left: -14%; top: -20%; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, var(--nx-halo-1), transparent); }
.nx-backdrop i:nth-child(2) { right: -16%; top: -14%; width: 50vmax; height: 50vmax; background: radial-gradient(closest-side, var(--nx-halo-2), transparent); animation-delay: -7s; }
.nx-backdrop i:nth-child(3) { left: 24%; bottom: -34%; width: 58vmax; height: 58vmax; background: radial-gradient(closest-side, var(--nx-halo-3), transparent); animation-delay: -13s; }
.nx-backdrop i:nth-child(4) { right: -10%; bottom: -26%; width: 40vmax; height: 40vmax; background: radial-gradient(closest-side, var(--nx-halo-4), transparent); animation-delay: -3s; }
.nx-backdrop::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgb(15 17 21 / .045) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }
[data-theme="dark"] .nx-backdrop::after { background-image: radial-gradient(rgb(255 255 255 / .04) 1px, transparent 1px); }
@keyframes nx-drift { to { transform: translate3d(3vmax, 2vmax, 0) scale(1.06); } }

/* ===================== material / surface / card ===================== */
.nx-material {
  background: var(--nx-surface);
  -webkit-backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate));
  backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate));
}
.nx-surface, .nx-card {
  position: relative;
  background: var(--nx-surface);
  -webkit-backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate));
  backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate));
  border: 1px solid var(--nx-border-subtle);
  border-radius: var(--nx-card-radius);
  box-shadow: var(--nx-shadow-card), var(--nx-shadow-inset);
}
.nx-card { padding: var(--nx-card-pad); }
.nx-card--lg { padding: var(--nx-card-pad-lg); border-radius: var(--nx-radius-6xl); }
.nx-card--flat { box-shadow: none; background: var(--nx-sunken); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nx-card--solid { background: var(--nx-surface-solid); }
.nx-card--tight { padding: 14px; border-radius: var(--nx-radius-3xl); }
.nx-card--interactive { transition: transform var(--nx-duration-slow) var(--nx-ease), box-shadow var(--nx-duration-slow) var(--nx-ease), border-color var(--nx-duration) var(--nx-ease); cursor: pointer; }
.nx-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--nx-shadow-card-lg), var(--nx-shadow-inset); border-color: var(--nx-border); }
.nx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nx-card__title { font-size: var(--nx-text-card-title); font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.nx-card__label { font-size: var(--nx-text-label); text-transform: uppercase; letter-spacing: .08em; color: var(--nx-fg-muted); font-weight: 500; }

/* ===================== tipografia ===================== */
.nx-display { font-size: var(--nx-text-display); line-height: 1.03; letter-spacing: -.028em; font-weight: 600; }
.nx-h1 { font-size: var(--nx-text-h1); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.nx-h2 { font-size: var(--nx-text-h2); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.nx-h3 { font-size: var(--nx-text-section-title); line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.nx-h4 { font-size: var(--nx-text-card-title); line-height: 1.35; font-weight: 600; letter-spacing: -.005em; }
.nx-body-lg { font-size: var(--nx-text-body-lg); line-height: 1.6; }
.nx-body { font-size: var(--nx-text-body); line-height: 1.6; }
.nx-meta { font-size: var(--nx-text-meta); color: var(--nx-fg-subtle); }
.nx-meta-sm { font-size: var(--nx-text-meta-sm); color: var(--nx-fg-muted); }
.nx-eyebrow { font-size: var(--nx-text-label); text-transform: uppercase; letter-spacing: .12em; color: var(--nx-fg-muted); font-weight: 500; font-family: var(--nx-font-mono); }
.nx-number { font-size: var(--nx-text-number-xl); letter-spacing: -.02em; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nx-number--lg { font-size: var(--nx-text-number-lg); }
.nx-muted { color: var(--nx-fg-muted); }
.nx-subtle { color: var(--nx-fg-subtle); }
.nx-accent-text { color: var(--nx-accent-fg); }
.nx-tabular { font-variant-numeric: tabular-nums; }
.nx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-prose { font-size: var(--nx-text-body); line-height: 1.7; color: var(--nx-fg-secondary); }
.nx-prose p + p { margin-top: 12px; }
.nx-gradient-text { background: linear-gradient(100deg, var(--nx-fg) 20%, var(--nx-accent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===================== layout utilitários ===================== */
.nx-row { display: flex; align-items: center; gap: 8px; }
.nx-col { display: flex; flex-direction: column; gap: 8px; }
.nx-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-wrap { flex-wrap: wrap; }
.nx-grow { flex: 1 1 auto; min-width: 0; }
.nx-gap-4 { gap: 4px; } .nx-gap-6 { gap: 6px; } .nx-gap-12 { gap: 12px; } .nx-gap-16 { gap: 16px; } .nx-gap-20 { gap: 20px; } .nx-gap-24 { gap: 24px; }
.nx-stack > * + * { margin-top: 16px; }
.nx-stack-lg > * + * { margin-top: 24px; }
.nx-stack-sm > * + * { margin-top: 8px; }
.nx-grid { display: grid; gap: 16px; }
.nx-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nx-grid-auto-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nx-span-2 { grid-column: span 2; }
.nx-hide { display: none !important; }
.nx-mt-4 { margin-top: 4px; } .nx-mt-8 { margin-top: 8px; } .nx-mt-12 { margin-top: 12px; } .nx-mt-16 { margin-top: 16px; } .nx-mt-24 { margin-top: 24px; } .nx-mt-32 { margin-top: 32px; }
.nx-mb-8 { margin-bottom: 8px; } .nx-mb-16 { margin-bottom: 16px; } .nx-mb-24 { margin-bottom: 24px; }
.nx-w-full { width: 100%; }
.nx-center { text-align: center; }
.nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1024px) {
  .nx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nx-grid-2, .nx-grid-3, .nx-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .nx-span-2 { grid-column: auto; }
  .nx-h1 { font-size: var(--nx-text-h1-mobile); }
}

/* ===================== divider ===================== */
.nx-divider { height: 1px; background: var(--nx-border); border: 0; margin: 16px 0; }
.nx-divider--v { width: 1px; height: 22px; background: var(--nx-border); margin: 0 4px; }
.nx-divider-label { display: flex; align-items: center; gap: 12px; color: var(--nx-fg-muted); font-size: var(--nx-text-meta-sm); text-transform: uppercase; letter-spacing: .1em; }
.nx-divider-label::before, .nx-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--nx-border); }

/* ===================== button ===================== */
.nx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--nx-button-h); padding: 0 16px; border-radius: var(--nx-radius-lg);
  font-size: var(--nx-text-ui); font-weight: 500; letter-spacing: -.003em; white-space: nowrap;
  border: 1px solid transparent; user-select: none;
  transition: background var(--nx-duration) var(--nx-ease), color var(--nx-duration) var(--nx-ease), border-color var(--nx-duration) var(--nx-ease), transform .12s var(--nx-ease), box-shadow var(--nx-duration) var(--nx-ease), opacity var(--nx-duration);
}
.nx-btn .ti { font-size: 16px; }
.nx-btn:active { transform: scale(.975); }
.nx-btn:disabled, .nx-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.nx-btn--primary { background: var(--nx-action); color: var(--nx-fg-on-action); box-shadow: 0 8px 18px -10px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .12); }
.nx-btn--primary:hover { background: var(--nx-action-hover); }
.nx-btn--accent { background: var(--nx-accent); color: var(--nx-fg-on-accent); box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--nx-accent) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .2); }
.nx-btn--accent:hover { background: var(--nx-accent-hover); }
.nx-btn--secondary { background: var(--nx-surface-strong); color: var(--nx-fg); border-color: var(--nx-border); box-shadow: var(--nx-shadow-xs); padding: 0 15px; }
.nx-btn--secondary:hover { background: var(--nx-elevated); border-color: var(--nx-border-strong); }
.nx-btn--ghost { color: var(--nx-fg-secondary); padding: 0 12px; }
.nx-btn--ghost:hover { background: var(--nx-hover); color: var(--nx-fg); }
.nx-btn--soft { background: var(--nx-sunken); color: var(--nx-fg); }
.nx-btn--soft:hover { background: var(--nx-sunken-2); }
.nx-btn--accent-soft { background: var(--nx-accent-soft); color: var(--nx-accent-fg); }
.nx-btn--accent-soft:hover { background: color-mix(in oklab, var(--nx-accent) 16%, transparent); }
.nx-btn--danger { background: var(--nx-danger); color: #fff; }
.nx-btn--danger:hover { filter: brightness(.93); }
.nx-btn--danger-soft { background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-btn--success { background: var(--nx-success); color: #fff; }
.nx-btn--sm { height: var(--nx-button-h-sm); padding: 0 12px; font-size: 12.5px; border-radius: var(--nx-radius-md); gap: 6px; }
.nx-btn--sm .ti { font-size: 15px; }
.nx-btn--lg { height: var(--nx-button-h-lg); padding: 0 20px; font-size: 14.5px; border-radius: var(--nx-radius-xl); }
.nx-btn--cta { height: var(--nx-button-h-cta); padding: 0 26px; font-size: 15.5px; border-radius: var(--nx-radius-2xl); }
.nx-btn--block { width: 100%; }
.nx-btn--pill { border-radius: var(--nx-radius-pill); }
.nx-btn--icon { width: var(--nx-button-h); padding: 0; }
.nx-btn--icon.nx-btn--sm { width: var(--nx-button-h-sm); }
.nx-btn--icon.nx-btn--lg { width: var(--nx-button-h-lg); }
.nx-btn .nx-btn__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--nx-accent); color: #fff; font-size: 10.5px; display: inline-grid; place-items: center; font-weight: 600; }
.nx-btn.is-loading { color: transparent !important; pointer-events: none; }
.nx-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--nx-fg-on-action) transparent var(--nx-fg-on-action) transparent; animation: nx-spin .7s linear infinite; }
.nx-btn--secondary.is-loading::after, .nx-btn--ghost.is-loading::after { border-color: var(--nx-fg) transparent var(--nx-fg) transparent; }
.nx-iconbtn-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-surface-solid); }

/* ===================== field / input ===================== */
.nx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.nx-label { font-size: 12px; font-weight: 500; color: var(--nx-fg-secondary); display: flex; align-items: center; gap: 4px; }
.nx-label .nx-req { color: var(--nx-accent); }
.nx-label .nx-opt { color: var(--nx-fg-muted); font-weight: 400; margin-left: auto; }
.nx-help { font-size: var(--nx-text-meta-sm); color: var(--nx-fg-muted); line-height: 1.45; }
.nx-error-text { font-size: var(--nx-text-meta-sm); color: var(--nx-danger); display: flex; gap: 4px; align-items: center; }
.nx-input, .nx-select, .nx-textarea {
  width: 100%; height: var(--nx-field-h); padding: 0 13px; border-radius: var(--nx-radius-lg);
  font-size: var(--nx-text-ui); background: var(--nx-surface-strong); color: var(--nx-fg);
  border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-xs);
  transition: border-color var(--nx-duration) var(--nx-ease), box-shadow var(--nx-duration) var(--nx-ease), background var(--nx-duration);
  outline: none; appearance: none; -webkit-appearance: none;
}
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-fg-muted); }
.nx-input:hover, .nx-select:hover, .nx-textarea:hover { border-color: var(--nx-border-strong); }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { border-color: color-mix(in oklab, var(--nx-accent) 55%, transparent); box-shadow: var(--nx-focus-ring); background: var(--nx-elevated); }
.nx-input.is-invalid { border-color: var(--nx-danger); }
.nx-textarea { height: auto; min-height: 96px; padding: 11px 13px; line-height: 1.55; resize: vertical; }
.nx-select { padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.nx-input-wrap { position: relative; display: flex; align-items: center; }
.nx-input-wrap > .ti { position: absolute; left: 12px; color: var(--nx-fg-muted); font-size: 16px; pointer-events: none; }
.nx-input-wrap > .nx-input { padding-left: 36px; }
.nx-input-wrap > .nx-input-suffix { position: absolute; right: 6px; display: flex; gap: 4px; align-items: center; }
.nx-input-wrap--prefix .nx-input-prefix { position: absolute; left: 12px; color: var(--nx-fg-muted); font-size: var(--nx-text-ui); }
.nx-input-wrap--prefix .nx-input { padding-left: 38px; }
.nx-input--lg { height: 48px; border-radius: var(--nx-radius-xl); font-size: 14.5px; }
.nx-input--pill { border-radius: var(--nx-radius-pill); }
.nx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.nx-form-grid .nx-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .nx-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* checkbox / radio */
.nx-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--nx-text-ui); line-height: 1.45; color: var(--nx-fg-secondary); }
.nx-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--nx-border-strong); background: var(--nx-surface-strong); display: grid; place-items: center; transition: all var(--nx-duration) var(--nx-ease); cursor: pointer; }
.nx-check input[type="radio"] { border-radius: 50%; }
.nx-check input:checked { background: var(--nx-action); border-color: var(--nx-action); }
.nx-check input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--nx-fg-on-action); border-bottom: 2px solid var(--nx-fg-on-action); transform: rotate(-45deg) translate(1px, -1px); }
.nx-check input[type="radio"]:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-fg-on-action); }
.nx-check input:focus-visible { box-shadow: var(--nx-focus-ring); }

/* switch */
.nx-switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 24px; cursor: pointer; }
.nx-switch input { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; margin: 0; border-radius: 99px; background: var(--nx-sunken-2); border: 1px solid var(--nx-border); cursor: pointer; transition: background var(--nx-duration) var(--nx-ease); }
.nx-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform var(--nx-duration-slow) var(--nx-ease-spring); }
.nx-switch input:checked { background: var(--nx-accent); border-color: transparent; }
.nx-switch input:checked::after { transform: translateX(16px); }
.nx-switch input:focus-visible { box-shadow: var(--nx-focus-ring); }

/* slider */
.nx-range { width: 100%; accent-color: var(--nx-accent); }

/* ===================== segmented control ===================== */
.nx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--nx-radius-lg); background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); }
.nx-seg button { height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--nx-fg-subtle); display: inline-flex; align-items: center; gap: 6px; transition: all var(--nx-duration) var(--nx-ease); white-space: nowrap; }
.nx-seg button:hover { color: var(--nx-fg); }
.nx-seg button.is-active { background: var(--nx-elevated); color: var(--nx-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 10px -6px rgb(0 0 0 / .2); }
.nx-seg--lg button { height: 36px; padding: 0 16px; font-size: 13.5px; }

/* ===================== tabs ===================== */
.nx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--nx-border); overflow-x: auto; scrollbar-width: none; }
.nx-tabs::-webkit-scrollbar { display: none; }
.nx-tab { position: relative; height: 42px; padding: 0 12px; font-size: var(--nx-text-ui); font-weight: 500; color: var(--nx-fg-subtle); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color var(--nx-duration); }
.nx-tab:hover { color: var(--nx-fg); }
.nx-tab.is-active { color: var(--nx-fg); }
.nx-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--nx-accent); }
.nx-tab .nx-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11px; display: inline-grid; place-items: center; background: var(--nx-sunken-2); color: var(--nx-fg-subtle); font-weight: 600; }
.nx-tab.is-active .nx-count { background: var(--nx-accent-soft); color: var(--nx-accent-fg); }
.nx-tabs--pill { border: 0; gap: 6px; }
.nx-tabs--pill .nx-tab { height: 36px; border-radius: var(--nx-radius-pill); padding: 0 14px; background: transparent; }
.nx-tabs--pill .nx-tab:hover { background: var(--nx-hover); }
.nx-tabs--pill .nx-tab.is-active { background: var(--nx-action); color: var(--nx-fg-on-action); }
.nx-tabs--pill .nx-tab.is-active::after { display: none; }
.nx-tabs--pill .nx-tab.is-active .nx-count { background: rgb(255 255 255 / .18); color: inherit; }

/* ===================== badge / chip / tag ===================== */
.nx-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--nx-radius-sm); font-size: var(--nx-text-meta-sm); font-weight: 500; white-space: nowrap; background: var(--nx-sunken-2); color: var(--nx-fg-secondary); line-height: 1; }
.nx-badge .ti { font-size: 13px; }
.nx-badge--sm { height: 20px; padding: 0 7px; font-size: 11px; border-radius: 6px; }
.nx-badge--pill { border-radius: var(--nx-radius-pill); }
.nx-badge--outline { background: transparent; border: 1px solid var(--nx-border-strong); }
.nx-badge--dark { background: var(--nx-inverse); color: var(--nx-page); }
.nx-badge--accent { background: var(--nx-accent-soft); color: var(--nx-accent-fg); }
.nx-badge--success { background: var(--nx-success-soft); color: var(--nx-success); }
.nx-badge--warning { background: var(--nx-warning-soft); color: var(--nx-warning); }
.nx-badge--danger { background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-badge--info { background: var(--nx-info-soft); color: var(--nx-info); }
.nx-badge--violet { background: var(--nx-violet-soft); color: var(--nx-violet); }
.nx-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nx-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: nx-pulse 1.8s ease-in-out infinite; }

.nx-chip { display: inline-flex; align-items: center; gap: 7px; height: var(--nx-chip-h); padding: 0 13px; border-radius: var(--nx-radius-md); font-size: 13px; font-weight: 500; color: var(--nx-fg-secondary); background: var(--nx-surface-strong); border: 1px solid var(--nx-border); transition: all var(--nx-duration) var(--nx-ease); white-space: nowrap; cursor: pointer; }
.nx-chip .ti { font-size: 15px; }
.nx-chip:hover { border-color: var(--nx-border-strong); color: var(--nx-fg); }
.nx-chip.is-on { background: var(--nx-action); color: var(--nx-fg-on-action); border-color: var(--nx-action); }
.nx-chip--sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.nx-chip__x { margin-right: -4px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; opacity: .7; }
.nx-chip__x:hover { opacity: 1; background: rgb(255 255 255 / .15); }

.nx-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--nx-radius-pill); font-size: 12.5px; color: var(--nx-fg-secondary); background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); white-space: nowrap; }
.nx-tag .ti { font-size: 14px; color: var(--nx-fg-muted); }
.nx-tag--level { padding-right: 4px; }
.nx-tag--level b { font-weight: 500; font-size: 11px; padding: 3px 7px; border-radius: 99px; background: var(--nx-elevated); color: var(--nx-fg-subtle); }

.nx-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-fg-muted); background: var(--nx-sunken); border: 1px solid var(--nx-border); }

/* ===================== avatar ===================== */
.nx-avatar { --s: 36px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s) * .36); font-weight: 600; letter-spacing: -.01em; color: #fff; background: var(--nx-inverse); overflow: hidden; user-select: none; }
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-avatar--xs { --s: 22px; } .nx-avatar--sm { --s: 28px; } .nx-avatar--md { --s: 40px; } .nx-avatar--lg { --s: 56px; } .nx-avatar--xl { --s: 84px; } .nx-avatar--2xl { --s: 112px; }
.nx-avatar--sq { border-radius: 28%; }
.nx-avatar--logo { background: var(--nx-surface-solid); border: 1px solid var(--nx-border); color: var(--nx-fg); box-shadow: var(--nx-shadow-xs); }
.nx-avatar__status { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 0 2px var(--nx-surface-solid); }
.nx-avatar-stack { display: flex; }
.nx-avatar-stack .nx-avatar { box-shadow: 0 0 0 2px var(--nx-surface-solid); }
.nx-avatar-stack .nx-avatar + .nx-avatar { margin-left: -8px; }

/* ===================== list ===================== */
.nx-list { display: flex; flex-direction: column; }
.nx-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--nx-radius-xl); transition: background var(--nx-duration); min-width: 0; }
.nx-list-item:hover { background: var(--nx-hover); }
.nx-list--divided .nx-list-item { border-radius: 0; border-bottom: 1px solid var(--nx-border-subtle); padding: 14px 4px; }
.nx-list--divided .nx-list-item:last-child { border-bottom: 0; }
.nx-list--divided .nx-list-item:hover { background: transparent; }
.nx-list-item__title { font-weight: 500; font-size: var(--nx-text-ui); color: var(--nx-fg); }
.nx-list-item__sub { font-size: var(--nx-text-meta); color: var(--nx-fg-muted); }

/* ===================== icon tile ===================== */
.nx-icon-tile { --s: 36px; flex: none; width: var(--s); height: var(--s); border-radius: 11px; display: grid; place-items: center; background: var(--nx-sunken); color: var(--nx-fg-secondary); font-size: calc(var(--s) * .48); }
.nx-icon-tile--sm { --s: 30px; border-radius: 9px; }
.nx-icon-tile--lg { --s: 46px; border-radius: 14px; }
.nx-icon-tile--xl { --s: 56px; border-radius: 17px; }
.nx-icon-tile--accent { background: var(--nx-accent-soft); color: var(--nx-accent-fg); }
.nx-icon-tile--success { background: var(--nx-success-soft); color: var(--nx-success); }
.nx-icon-tile--warning { background: var(--nx-warning-soft); color: var(--nx-warning); }
.nx-icon-tile--danger { background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-icon-tile--info { background: var(--nx-info-soft); color: var(--nx-info); }
.nx-icon-tile--violet { background: var(--nx-violet-soft); color: var(--nx-violet); }
.nx-icon-tile--dark { background: var(--nx-inverse); color: var(--nx-page); }

/* ===================== stat / metric ===================== */
.nx-stat { display: flex; flex-direction: column; gap: 10px; }
.nx-stat__top { display: flex; align-items: center; justify-content: space-between; }
.nx-stat__label { font-size: 12.5px; color: var(--nx-fg-subtle); font-weight: 500; }
.nx-stat__value { font-size: var(--nx-text-number-xl); letter-spacing: -.025em; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.nx-delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 7px; font-size: 11.5px; font-weight: 600; background: var(--nx-success-soft); color: var(--nx-success); }
.nx-delta--down { background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-delta--flat { background: var(--nx-sunken-2); color: var(--nx-fg-subtle); }

/* ===================== progress / ring ===================== */
.nx-progress { height: 6px; border-radius: 99px; background: var(--nx-sunken-2); overflow: hidden; }
.nx-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--nx-action); transition: width .8s var(--nx-ease); }
.nx-progress--accent > i { background: linear-gradient(90deg, color-mix(in oklab, var(--nx-accent) 70%, #ffb38a), var(--nx-accent)); }
.nx-progress--success > i { background: var(--nx-success); }
.nx-progress--lg { height: 10px; }
.nx-ring { position: relative; flex: none; display: grid; place-items: center; }
.nx-ring svg { transform: rotate(-90deg); }
.nx-ring circle { fill: none; stroke-linecap: round; }
.nx-ring .nx-ring__track { stroke: var(--nx-sunken-2); }
.nx-ring .nx-ring__bar { transition: stroke-dashoffset 1s var(--nx-ease); }
.nx-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ===================== table ===================== */
.nx-table-wrap { border-radius: var(--nx-radius-4xl); border: 1px solid var(--nx-border-subtle); background: var(--nx-surface); -webkit-backdrop-filter: blur(var(--nx-material-blur)); backdrop-filter: blur(var(--nx-material-blur)); box-shadow: var(--nx-shadow-card); overflow: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-text-ui); }
.nx-table th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--nx-fg-muted); padding: 12px 16px; border-bottom: 1px solid var(--nx-border); white-space: nowrap; background: var(--nx-sunken); position: sticky; top: 0; z-index: 1; }
.nx-table td { padding: 13px 16px; border-bottom: 1px solid var(--nx-border-subtle); vertical-align: middle; }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table tbody tr { transition: background var(--nx-duration); }
.nx-table tbody tr:hover { background: var(--nx-hover); }
.nx-table tbody tr.is-clickable { cursor: pointer; }
.nx-table .nx-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .nx-table--stack thead { display: none; }
  .nx-table--stack tr { display: block; padding: 10px 6px; border-bottom: 1px solid var(--nx-border); }
  .nx-table--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 0; }
  .nx-table--stack td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-fg-muted); }
}

/* ===================== callout / empty ===================== */
.nx-callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--nx-radius-2xl); background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); font-size: var(--nx-text-ui); color: var(--nx-fg-secondary); line-height: 1.5; }
.nx-callout > .ti { font-size: 18px; flex: none; margin-top: 1px; }
.nx-callout b { color: var(--nx-fg); font-weight: 600; }
.nx-callout--info { background: var(--nx-info-soft); border-color: transparent; } .nx-callout--info > .ti { color: var(--nx-info); }
.nx-callout--warning { background: var(--nx-warning-soft); border-color: transparent; } .nx-callout--warning > .ti { color: var(--nx-warning); }
.nx-callout--danger { background: var(--nx-danger-soft); border-color: transparent; } .nx-callout--danger > .ti { color: var(--nx-danger); }
.nx-callout--success { background: var(--nx-success-soft); border-color: transparent; } .nx-callout--success > .ti { color: var(--nx-success); }
.nx-callout--accent { background: var(--nx-accent-soft); border-color: transparent; } .nx-callout--accent > .ti { color: var(--nx-accent); }

.nx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.nx-empty__art { position: relative; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; color: var(--nx-fg-subtle); background: var(--nx-surface-solid); border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-card); margin-bottom: 6px; }
.nx-empty__art::before { content: ""; position: absolute; inset: -14px; border-radius: 30px; border: 1px dashed var(--nx-border-strong); opacity: .7; }
.nx-empty__title { font-weight: 600; font-size: 15px; }
.nx-empty__text { color: var(--nx-fg-muted); font-size: var(--nx-text-ui); max-width: 380px; line-height: 1.55; }

/* ===================== skeleton / spinner ===================== */
.nx-skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--nx-sunken) 25%, var(--nx-sunken-2) 50%, var(--nx-sunken) 75%); background-size: 200% 100%; animation: nx-shimmer 1.4s linear infinite; }
@keyframes nx-shimmer { to { background-position: -200% 0; } }
.nx-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--nx-border-strong); border-top-color: var(--nx-fg); animation: nx-spin .7s linear infinite; }
@keyframes nx-spin { to { transform: rotate(360deg); } }
@keyframes nx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.nx-dots { display: inline-flex; gap: 4px; }
.nx-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: nx-bounce 1.2s infinite ease-in-out; }
.nx-dots i:nth-child(2) { animation-delay: .15s; } .nx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes nx-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ===================== overlays: scrim, dialog, drawer ===================== */
.nx-scrim { position: fixed; inset: 0; z-index: 80; background: var(--nx-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s var(--nx-ease); }
.nx-scrim.is-open { opacity: 1; }
.nx-dialog-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.nx-dialog { pointer-events: auto; width: min(520px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--nx-surface-strong); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-7xl); box-shadow: var(--nx-shadow-popover); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .24s var(--nx-ease), transform .3s var(--nx-ease); }
.nx-dialog.is-open { opacity: 1; transform: none; }
.nx-dialog--sm { width: min(420px, 100%); }
.nx-dialog--lg { width: min(760px, 100%); }
.nx-dialog--xl { width: min(980px, 100%); }
.nx-dialog__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 6px; }
.nx-dialog__title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.nx-dialog__desc { color: var(--nx-fg-subtle); font-size: var(--nx-text-ui); margin-top: 4px; line-height: 1.5; }
.nx-dialog__body { padding: 16px 24px; overflow: auto; }
.nx-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.nx-dialog__close { margin-left: auto; margin-top: -4px; margin-right: -8px; }
@media (max-width: 640px) {
  .nx-dialog-layer { align-items: end; padding: 0; }
  .nx-dialog, .nx-dialog--lg, .nx-dialog--xl, .nx-dialog--sm { width: 100%; border-radius: 26px 26px 0 0; max-height: 92vh; transform: translateY(40px); }
  .nx-dialog__foot { flex-direction: column-reverse; } .nx-dialog__foot .nx-btn { width: 100%; }
}

.nx-drawer { position: fixed; z-index: 90; top: 12px; bottom: 12px; right: 12px; width: min(520px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--nx-surface-strong); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-7xl); box-shadow: var(--nx-shadow-popover); transform: translateX(calc(100% + 24px)); transition: transform .38s var(--nx-ease); }
.nx-drawer.is-open { transform: none; }
.nx-drawer--lg { width: min(760px, calc(100vw - 24px)); }
.nx-drawer--left { right: auto; left: 12px; transform: translateX(calc(-100% - 24px)); }
.nx-drawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--nx-border-subtle); }
.nx-drawer__body { flex: 1; overflow: auto; padding: 20px; }
.nx-drawer__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--nx-border-subtle); }

/* ===================== popover / menu ===================== */
.nx-popover { position: fixed; z-index: 100; min-width: 220px; padding: 6px; background: var(--nx-surface-strong); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-3xl); box-shadow: var(--nx-shadow-popover); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top; transition: opacity .16s var(--nx-ease), transform .2s var(--nx-ease); }
.nx-popover.is-open { opacity: 1; transform: none; }
.nx-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; font-size: var(--nx-text-ui); color: var(--nx-fg-secondary); text-align: left; transition: background var(--nx-duration); }
.nx-menu-item:hover, .nx-menu-item.is-active { background: var(--nx-hover); color: var(--nx-fg); }
.nx-menu-item .ti { font-size: 17px; color: var(--nx-fg-muted); }
.nx-menu-item--danger, .nx-menu-item--danger .ti { color: var(--nx-danger); }
.nx-menu-sep { height: 1px; background: var(--nx-border); margin: 6px 4px; }
.nx-menu-label { padding: 8px 10px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--nx-fg-muted); }

/* tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 120; white-space: nowrap; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 500; background: var(--nx-inverse); color: var(--nx-page); pointer-events: none; box-shadow: var(--nx-shadow-sm); animation: nx-fade-in .15s var(--nx-ease); }
[data-tip-pos="right"]:hover::after { left: calc(100% + 10px); bottom: auto; top: 50%; transform: translateY(-50%); }
@keyframes nx-fade-in { from { opacity: 0; } }

/* ===================== toast ===================== */
.nx-toaster { position: fixed; z-index: 130; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.nx-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 40px)); padding: 14px 14px 14px 16px; border-radius: var(--nx-radius-3xl); background: var(--nx-inverse); color: var(--nx-page); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .55); animation: nx-toast-in .4s var(--nx-ease-spring); }
.nx-toast.is-leaving { animation: nx-toast-out .25s var(--nx-ease) forwards; }
.nx-toast__icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgb(255 255 255 / .12); font-size: 15px; }
[data-theme="dark"] .nx-toast__icon { background: rgb(0 0 0 / .08); }
.nx-toast--success .nx-toast__icon { background: #16a34a; color: #fff; }
.nx-toast--danger .nx-toast__icon { background: #dc2626; color: #fff; }
.nx-toast--accent .nx-toast__icon { background: var(--nx-accent); color: #fff; }
.nx-toast__title { font-weight: 600; font-size: 13.5px; }
.nx-toast__desc { font-size: 12.5px; opacity: .72; margin-top: 2px; line-height: 1.45; }
@keyframes nx-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes nx-toast-out { to { opacity: 0; transform: translateX(30px); } }
@media (max-width: 640px) { .nx-toaster { left: 12px; right: 12px; bottom: 84px; align-items: stretch; } .nx-toast { width: 100%; } }

/* ===================== stepper / timeline ===================== */
.nx-steps { display: flex; align-items: flex-start; gap: 0; }
.nx-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; min-width: 0; }
.nx-step::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; border-radius: 2px; background: var(--nx-border); }
.nx-step:first-child::before { display: none; }
.nx-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--nx-surface-solid); border: 1.5px solid var(--nx-border-strong); color: var(--nx-fg-muted); transition: all var(--nx-duration-slow) var(--nx-ease); }
.nx-step__label { font-size: 11.5px; color: var(--nx-fg-muted); font-weight: 500; line-height: 1.3; }
.nx-step.is-done::before, .nx-step.is-current::before { background: var(--nx-action); }
.nx-step.is-done .nx-step__dot { background: var(--nx-action); border-color: var(--nx-action); color: var(--nx-fg-on-action); }
.nx-step.is-current .nx-step__dot { border-color: var(--nx-accent); color: var(--nx-accent); background: var(--nx-accent-50); box-shadow: 0 0 0 4px var(--nx-accent-soft); }
.nx-step.is-current .nx-step__label, .nx-step.is-done .nx-step__label { color: var(--nx-fg); }
.nx-step.is-failed .nx-step__dot { background: var(--nx-danger-soft); border-color: var(--nx-danger); color: var(--nx-danger); }

.nx-timeline { position: relative; display: flex; flex-direction: column; gap: 4px; }
.nx-tl-item { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.nx-tl-item::before { content: ""; position: absolute; left: 17px; top: 46px; bottom: -14px; width: 1.5px; background: var(--nx-border); }
.nx-tl-item:last-child::before { display: none; }
.nx-tl-item__icon { position: relative; z-index: 1; }

/* ===================== kanban ===================== */
.nx-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.nx-kcol { display: flex; flex-direction: column; border-radius: var(--nx-radius-5xl); background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); min-height: 340px; max-height: calc(100vh - 260px); }
.nx-kcol__head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; font-weight: 600; font-size: 13.5px; }
.nx-kcol__dot { width: 8px; height: 8px; border-radius: 50%; }
.nx-kcol__body { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; transition: background var(--nx-duration); border-radius: 0 0 22px 22px; }
.nx-kcol__body.is-over { background: var(--nx-accent-soft); }
.nx-kcard { background: var(--nx-surface-solid); border: 1px solid var(--nx-border-subtle); border-radius: var(--nx-radius-3xl); padding: 13px; box-shadow: var(--nx-shadow-sm); cursor: grab; transition: transform var(--nx-duration) var(--nx-ease), box-shadow var(--nx-duration) var(--nx-ease); }
.nx-kcard:hover { box-shadow: var(--nx-shadow-card-lg); transform: translateY(-1px); }
.nx-kcard.is-dragging { opacity: .45; transform: rotate(1.5deg); }
.nx-kcol__empty { border: 1.5px dashed var(--nx-border-strong); border-radius: 16px; padding: 22px 10px; text-align: center; color: var(--nx-fg-muted); font-size: 12.5px; }

/* ===================== AI: orb + chat ===================== */
.nx-orb { --s: 44px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: conic-gradient(from 180deg, #ff9a5c, #EE5214, #ff5f8f, #8a6cff, #4fc3f7, #ff9a5c); filter: saturate(1.1); animation: nx-orb-spin 8s linear infinite; box-shadow: 0 10px 30px -8px color-mix(in oklab, #EE5214 60%, transparent); }
.nx-orb::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .95), rgb(255 255 255 / .35) 45%, transparent 70%); filter: blur(1px); }
.nx-orb--sm { --s: 28px; } .nx-orb--lg { --s: 72px; } .nx-orb--xl { --s: 104px; }
.nx-orb.is-thinking { animation-duration: 1.6s; }
@keyframes nx-orb-spin { to { transform: rotate(360deg); } }
.nx-chat { display: flex; flex-direction: column; gap: 16px; }
.nx-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 100%; animation: nx-rise .35s var(--nx-ease); }
.nx-msg--user { flex-direction: row-reverse; }
.nx-msg__bubble { padding: 12px 15px; border-radius: 18px; font-size: var(--nx-text-body-sm); line-height: 1.6; max-width: min(640px, 85%); }
.nx-msg--ai .nx-msg__bubble { background: var(--nx-surface-solid); border: 1px solid var(--nx-border-subtle); border-top-left-radius: 6px; box-shadow: var(--nx-shadow-sm); }
.nx-msg--user .nx-msg__bubble { background: var(--nx-action); color: var(--nx-fg-on-action); border-top-right-radius: 6px; }
.nx-prompt { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 22px; background: var(--nx-surface-strong); border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-card-lg); transition: border-color var(--nx-duration), box-shadow var(--nx-duration); }
.nx-prompt:focus-within { border-color: color-mix(in oklab, var(--nx-accent) 50%, transparent); box-shadow: var(--nx-shadow-card-lg), var(--nx-focus-ring); }
.nx-prompt textarea, .nx-prompt input { flex: 1; min-height: 40px; max-height: 160px; padding: 9px 0; border: 0; outline: 0; background: transparent; resize: none; font-size: 14.5px; line-height: 1.5; }
.nx-prompt textarea::placeholder, .nx-prompt input::placeholder { color: var(--nx-fg-muted); }
.nx-prompt--hero { border-radius: 26px; padding: 10px 10px 10px 20px; }
.nx-prompt--hero textarea, .nx-prompt--hero input { font-size: 16px; min-height: 48px; }
@keyframes nx-rise { from { opacity: 0; transform: translateY(8px); } }

/* ===================== dropzone / file ===================== */
.nx-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px; border-radius: var(--nx-radius-3xl); border: 1.5px dashed var(--nx-border-strong); background: var(--nx-sunken); text-align: center; color: var(--nx-fg-subtle); font-size: var(--nx-text-ui); cursor: pointer; transition: all var(--nx-duration); }
.nx-dropzone:hover { border-color: var(--nx-accent); background: var(--nx-accent-soft); color: var(--nx-fg); }
.nx-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--nx-radius-2xl); border: 1px solid var(--nx-border); background: var(--nx-surface-strong); }

/* ===================== AppShell (admin) ===================== */
.nx-shell { display: grid; grid-template-columns: var(--nx-sb-w) minmax(0, 1fr); gap: 0; min-height: 100vh; transition: grid-template-columns .35s var(--nx-ease); }
.nx-shell.is-collapsed { grid-template-columns: var(--nx-sb-w-collapsed) minmax(0, 1fr); }
.nx-sidebar { position: sticky; top: 0; height: 100vh; padding: 14px 0 14px 14px; z-index: 40; }
.nx-sidebar__panel { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--nx-radius-7xl); background: var(--nx-surface); -webkit-backdrop-filter: blur(var(--nx-material-blur)) saturate(140%); backdrop-filter: blur(var(--nx-material-blur)) saturate(140%); border: 1px solid var(--nx-border-subtle); box-shadow: var(--nx-shadow-card), var(--nx-shadow-inset); padding: 16px 12px 12px; }
.nx-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; height: 44px; }
.nx-sidebar__brand img { height: 26px; width: auto; }
.nx-sidebar__brand .nx-logo-mark { display: none; height: 30px; }
.nx-sidebar__toggle { position: absolute; top: 22px; right: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-surface-solid); border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-sm); color: var(--nx-fg-subtle); z-index: 2; transition: transform .35s var(--nx-ease); }
.nx-sidebar__toggle:hover { color: var(--nx-fg); }
.is-collapsed .nx-sidebar__toggle { transform: rotate(180deg); }
.nx-sidebar__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.nx-nav-group { margin-top: 14px; }
.nx-nav-group__label { height: 20px; padding: 0 12px; margin-bottom: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--nx-fg-muted); font-weight: 500; white-space: nowrap; overflow: hidden; }
.nx-nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px; border-radius: var(--nx-radius-nav); font-size: 13.5px; color: var(--nx-fg-subtle); white-space: nowrap; transition: background var(--nx-duration), color var(--nx-duration); }
.nx-nav-item .ti { font-size: 18px; flex: none; }
.nx-nav-item:hover { background: var(--nx-hover); color: var(--nx-fg); }
.nx-nav-item.is-active { background: var(--nx-action); color: var(--nx-fg-on-action); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .5); }
.nx-nav-item__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11px; font-weight: 600; display: grid; place-items: center; background: var(--nx-accent); color: #fff; }
.nx-nav-item__label { overflow: hidden; text-overflow: ellipsis; }
.nx-tenant { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 15px; background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); text-align: left; transition: background var(--nx-duration); }
.nx-tenant:hover { background: var(--nx-sunken-2); }
.nx-profile { display: flex; align-items: center; gap: 10px; padding: 6px; margin-top: 8px; border-radius: 17px; transition: background var(--nx-duration); width: 100%; text-align: left; }
.nx-profile:hover { background: var(--nx-hover); }
.is-collapsed .nx-nav-item__label, .is-collapsed .nx-nav-group__label, .is-collapsed .nx-nav-item__badge, .is-collapsed .nx-hide-collapsed { display: none; }
.is-collapsed .nx-nav-item { justify-content: center; padding: 0; }
.is-collapsed .nx-nav-group__label { display: block; height: 1px; background: var(--nx-border); margin: 10px 12px; font-size: 0; }
.is-collapsed .nx-sidebar__brand { justify-content: center; padding: 4px 0 14px; }
.is-collapsed .nx-sidebar__brand .nx-logo-full { display: none; }
.is-collapsed .nx-sidebar__brand .nx-logo-mark { display: block; }
.is-collapsed .nx-tenant, .is-collapsed .nx-profile { justify-content: center; padding: 6px 0; background: transparent; border-color: transparent; }

.nx-main { min-width: 0; padding: 14px 24px 40px; }
.nx-topbar { position: sticky; top: 14px; z-index: 30; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 10px 0 18px; border-radius: var(--nx-radius-5xl); background: var(--nx-surface); -webkit-backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate)); backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate)); border: 1px solid var(--nx-border-subtle); box-shadow: var(--nx-shadow-card), var(--nx-shadow-inset); }
.nx-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nx-fg-muted); min-width: 0; }
.nx-breadcrumb a:hover { color: var(--nx-fg); }
.nx-breadcrumb .is-current { color: var(--nx-fg); font-weight: 500; }
.nx-breadcrumb .ti { font-size: 13px; opacity: .6; }
.nx-search-trigger { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: var(--nx-radius-lg); background: var(--nx-sunken); border: 1px solid var(--nx-border-subtle); color: var(--nx-fg-muted); font-size: 13px; min-width: 220px; transition: all var(--nx-duration); }
.nx-search-trigger:hover { border-color: var(--nx-border-strong); color: var(--nx-fg-subtle); }
.nx-search-trigger .nx-kbd { margin-left: auto; }
.nx-content { max-width: var(--nx-content-max); margin: 0 auto; padding-top: 28px; }
.nx-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.nx-page-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-page-head__sub { color: var(--nx-fg-subtle); font-size: var(--nx-text-body-sm); }
.nx-mobile-only { display: none !important; }
@media (max-width: 1024px) {
  .nx-shell, .nx-shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .nx-sidebar { position: fixed; inset: 0 auto 0 0; width: calc(var(--nx-sb-w) + 14px); transform: translateX(-110%); transition: transform .35s var(--nx-ease); }
  .nx-shell.is-nav-open .nx-sidebar { transform: none; }
  .nx-sidebar__toggle { display: none; }
  .nx-main { padding: 10px 14px 90px; }
  .nx-topbar { top: 10px; padding-left: 8px; }
  .nx-mobile-only { display: inline-flex !important; }
  .nx-desktop-only { display: none !important; }
  .nx-search-trigger { min-width: 0; }
  .nx-search-trigger span, .nx-search-trigger .nx-kbd { display: none; }
}

/* ===================== site header (candidato) ===================== */
.nx-siteheader { position: sticky; top: 12px; z-index: 40; margin: 12px auto 0; width: min(var(--nx-content-max), calc(100% - 32px)); display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 10px 0 20px; border-radius: var(--nx-radius-5xl); background: var(--nx-surface); -webkit-backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate)); backdrop-filter: blur(var(--nx-material-blur)) saturate(var(--nx-material-saturate)); border: 1px solid var(--nx-border-subtle); box-shadow: var(--nx-shadow-card), var(--nx-shadow-inset); }
.nx-siteheader__brand img { height: 24px; width: auto; }
.nx-navlinks { display: flex; gap: 2px; margin-left: 18px; }
.nx-navlink { height: 38px; padding: 0 14px; border-radius: var(--nx-radius-pill); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--nx-fg-subtle); transition: all var(--nx-duration); white-space: nowrap; }
.nx-navlink:hover { color: var(--nx-fg); background: var(--nx-hover); }
.nx-navlink.is-active { color: var(--nx-fg); background: var(--nx-elevated); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 14px -10px rgb(0 0 0 / .3); }
.nx-navlink .ti { font-size: 17px; }
.nx-tabbar { display: none; }
@media (max-width: 900px) {
  .nx-navlinks { display: none; }
  .nx-siteheader { padding-left: 14px; }
  .nx-tabbar { display: flex; position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 12px; height: 64px; padding: 6px; gap: 4px; border-radius: 24px; background: var(--nx-surface-strong); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-popover); }
  .nx-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 18px; font-size: 10.5px; font-weight: 500; color: var(--nx-fg-muted); }
  .nx-tabbar a .ti { font-size: 21px; }
  .nx-tabbar a.is-active { color: var(--nx-fg); background: var(--nx-sunken); }
  .nx-tabbar a.is-active .ti { color: var(--nx-accent); }
}
.nx-container { width: min(var(--nx-content-max), calc(100% - 32px)); margin: 0 auto; }

/* ===================== settings layout ===================== */
.nx-settings { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.nx-settings__nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.nx-settings__nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; color: var(--nx-fg-subtle); transition: all var(--nx-duration); }
.nx-settings__nav a:hover { background: var(--nx-hover); color: var(--nx-fg); }
.nx-settings__nav a.is-active { background: var(--nx-action); color: var(--nx-fg-on-action); }
.nx-settings__nav a .ti { font-size: 17px; }
.nx-settings__nav a.is-danger { color: var(--nx-danger); }
.nx-settings__nav a.is-danger.is-active { background: var(--nx-danger); color: #fff; }
@media (max-width: 900px) {
  .nx-settings { grid-template-columns: minmax(0, 1fr); }
  .nx-settings__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .nx-settings__nav a { white-space: nowrap; }
}

/* ===================== section ===================== */
.nx-section { margin-top: 36px; }
.nx-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nx-section__title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.nx-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--nx-fg-subtle); transition: color var(--nx-duration), gap var(--nx-duration); }
.nx-link:hover { color: var(--nx-accent-fg); gap: 7px; }

/* ===================== command palette ===================== */
.nx-palette { position: fixed; z-index: 110; top: 12vh; left: 50%; transform: translateX(-50%) scale(.98); width: min(620px, calc(100vw - 24px)); opacity: 0; transition: opacity .18s var(--nx-ease), transform .22s var(--nx-ease); background: var(--nx-surface-strong); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-6xl); box-shadow: var(--nx-shadow-popover); overflow: hidden; }
.nx-palette.is-open { opacity: 1; transform: translateX(-50%); }
.nx-palette__input { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 58px; border-bottom: 1px solid var(--nx-border); }
.nx-palette__input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15.5px; }
.nx-palette__input input:focus-visible, .nx-prompt input:focus-visible, .nx-prompt textarea:focus-visible { box-shadow: none; }
.nx-palette__list { max-height: 380px; overflow: auto; padding: 8px; }
.nx-palette__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; font-size: 13.5px; color: var(--nx-fg-secondary); }
.nx-palette__item.is-active { background: var(--nx-hover); color: var(--nx-fg); }
.nx-palette__item .nx-meta-sm { margin-left: auto; }

/* ===================== animações de entrada ===================== */
.nx-enter { animation: nx-rise .45s var(--nx-ease) backwards; }
.nx-enter-stagger > * { animation: nx-rise .5s var(--nx-ease) both; }
.nx-enter-stagger > *:nth-child(2) { animation-delay: .04s; } .nx-enter-stagger > *:nth-child(3) { animation-delay: .08s; } .nx-enter-stagger > *:nth-child(4) { animation-delay: .12s; } .nx-enter-stagger > *:nth-child(5) { animation-delay: .16s; } .nx-enter-stagger > *:nth-child(6) { animation-delay: .2s; } .nx-enter-stagger > *:nth-child(7) { animation-delay: .24s; } .nx-enter-stagger > *:nth-child(8) { animation-delay: .28s; } .nx-enter-stagger > *:nth-child(n+9) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===================== swatch (personalização) ===================== */
.nx-swatch { width: 36px; height: 36px; border-radius: 12px; border: 2px solid var(--nx-surface-solid); box-shadow: 0 0 0 1px var(--nx-border-strong); cursor: pointer; transition: transform var(--nx-duration) var(--nx-ease-spring); }
.nx-swatch:hover { transform: scale(1.08); }
.nx-swatch.is-active { box-shadow: 0 0 0 2px var(--nx-fg); }
.nx-color-input { width: 44px; height: 40px; padding: 3px; border-radius: 12px; border: 1px solid var(--nx-border); background: var(--nx-surface-strong); cursor: pointer; }