/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 80px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #ecf0ef;
  --accent-2: #e4ece9;
  --accent-3: #cfe9e1;
  --accent-4: #bbe3d7;
  --accent-5: #a5d9cb;
  --accent-6: #8dccbc;
  --accent-7: #6ebca8;
  --accent-8: #36a78f;
  --accent-9: #0fae93;
  --accent-10: #2b9f88;
  --accent-11: #006d58;
  --accent-12: #0e3d33;

  --accent-a1: #af941708;
  --accent-a2: #38740a0e;
  --accent-a3: #06a85922;
  --accent-a4: #02a96737;
  --accent-a5: #039f6c4f;
  --accent-a6: #01946868;
  --accent-a7: #028e668a;
  --accent-a8: #019271c6;
  --accent-a9: #00aa8def;
  --accent-a10: #008c70d1;
  --accent-a11: #006d58;
  --accent-a12: #003227f0;

  --accent-contrast: #fff;
  --accent-surface: #e1eae6cc;
  --accent-indicator: #0fae93;
  --accent-track: #0fae93;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(95.2% 0.005 176.1);
      --accent-2: oklch(93.6% 0.0097 176.1);
      --accent-3: oklch(91.2% 0.0285 176.1);
      --accent-4: oklch(88.3% 0.0441 176.1);
      --accent-5: oklch(84.6% 0.0574 176.1);
      --accent-6: oklch(79.9% 0.0689 176.1);
      --accent-7: oklch(73.8% 0.0829 176.1);
      --accent-8: oklch(65.9% 0.1064 176.1);
      --accent-9: oklch(67.2% 0.1234 176.1);
      --accent-10: oklch(63.3% 0.1064 176.1);
      --accent-11: oklch(46.9% 0.1234 176.1);
      --accent-12: oklch(32.7% 0.0532 176.1);

      --accent-a1: color(display-p3 0.6706 0.549 0.0196 / 0.029);
      --accent-a2: color(display-p3 0.2 0.4353 0.0039 / 0.053);
      --accent-a3: color(display-p3 0.0039 0.5725 0.2392 / 0.113);
      --accent-a4: color(display-p3 0.0078 0.5961 0.3098 / 0.185);
      --accent-a5: color(display-p3 0.0039 0.5529 0.3294 / 0.264);
      --accent-a6: color(display-p3 0.0039 0.498 0.3333 / 0.352);
      --accent-a7: color(display-p3 0.0039 0.4745 0.3137 / 0.465);
      --accent-a8: color(display-p3 0 0.4667 0.3255 / 0.628);
      --accent-a9: color(display-p3 0 0.5333 0.3922 / 0.67);
      --accent-a10: color(display-p3 0 0.4471 0.3216 / 0.662);
      --accent-a11: color(display-p3 0 0.2902 0.2039 / 0.808);
      --accent-a12: color(display-p3 0 0.1412 0.098 / 0.883);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.8863 0.9176 0.9059 / 0.8);
      --accent-indicator: oklch(67.2% 0.1234 176.1);
      --accent-track: oklch(67.2% 0.1234 176.1);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8b8d98;
  --grayscale-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.547 0.553 0.592);
      --grayscale-track: color(display-p3 0.547 0.553 0.592);
    }
  }
}


.dark {
  --accent-1: #131b19;
  --accent-2: #15201d;
  --accent-3: #14302a;
  --accent-4: #0c3d33;
  --accent-5: #13493e;
  --accent-6: #1c574b;
  --accent-7: #25695b;
  --accent-8: #2b7e6e;
  --accent-9: #19d3b5;
  --accent-10: #00c8aa;
  --accent-11: #24d7b9;
  --accent-12: #aff0e0;

  --accent-a1: #f034000a;
  --accent-a2: #f49a000c;
  --accent-a3: #70fb3d19;
  --accent-a4: #18ff7027;
  --accent-a5: #36fc9235;
  --accent-a6: #4effac44;
  --accent-a7: #58ffbc58;
  --accent-a8: #55fdc870;
  --accent-a9: #1cfed5cf;
  --accent-a10: #00ffd2c2;
  --accent-a11: #29ffd7d3;
  --accent-a12: #bafeecef;

  --accent-contrast: #072821;
  --accent-surface: #20261380;
  --accent-indicator: #19d3b5;
  --accent-track: #19d3b5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.2% 0.0119 177.2);
      --accent-2: oklch(23.3% 0.0164 177.2);
      --accent-3: oklch(28.5% 0.0367 177.2);
      --accent-4: oklch(32.4% 0.0531 177.2);
      --accent-5: oklch(36.6% 0.0585 177.2);
      --accent-6: oklch(41.5% 0.0634 177.2);
      --accent-7: oklch(47.4% 0.0716 177.2);
      --accent-8: oklch(53.9% 0.0839 177.2);
      --accent-9: oklch(77.7% 0.1406 177.2);
      --accent-10: oklch(74.2% 0.1406 177.2);
      --accent-11: oklch(78.9% 0.1406 177.2);
      --accent-12: oklch(90.7% 0.0689 177.2);

      --accent-a1: color(display-p3 0.9725 0.2353 0 / 0.03);
      --accent-a2: color(display-p3 0.9843 0.7216 0 / 0.038);
      --accent-a3: color(display-p3 0.6118 1 0.2824 / 0.092);
      --accent-a4: color(display-p3 0.4235 1 0.4706 / 0.149);
      --accent-a5: color(display-p3 0.4667 1 0.6039 / 0.201);
      --accent-a6: color(display-p3 0.5176 1 0.6902 / 0.263);
      --accent-a7: color(display-p3 0.5529 1 0.7529 / 0.341);
      --accent-a8: color(display-p3 0.5412 1 0.8157 / 0.428);
      --accent-a9: color(display-p3 0.4745 1 0.8588 / 0.795);
      --accent-a10: color(display-p3 0.451 1 0.8471 / 0.747);
      --accent-a11: color(display-p3 0.4824 1 0.8627 / 0.813);
      --accent-a12: color(display-p3 0.7961 1 0.9373 / 0.926);

      --accent-contrast: #072821;
      --accent-surface: color(display-p3 0.1333 0.149 0.0824 / 0.5);
      --accent-indicator: oklch(77.7% 0.1406 177.2);
      --accent-track: oklch(77.7% 0.1406 177.2);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(15, 174, 147, 1);
  --background: rgba(238, 243, 246, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #eef3f6;
}

.dark {
  color-scheme: dark;
  --accent: rgba(25, 211, 181, 1);
  --background: rgba(10, 26, 40, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #0a1a28;
}

:root {
  /* Gray Scale */
  --gray-90: #0e0d0c;
  --gray-80: #12110f;
  --gray-70: #23221e;
  --gray-60: #2c2a25;
  --gray-50: #565551;
  --gray-40: #777674;
  --gray-30: #abaaa8;
  --gray-20: #d5d4d3;
  --gray-10: #eaeae9;
  --gray-0: #f4f4f4;
}

/* ===== Landing Hero ===== */

.landing-hero {
  min-height: 860px;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
}

/* Breathing animation keyframes */
@keyframes breathe-corner-1 {
  0%, 100% {
    opacity: 0.08;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.05);
  }
}

@keyframes breathe-corner-2 {
  0%, 100% {
    opacity: 0.06;
    transform: scale(1);
  }
  50% {
    opacity: 0.12;
    transform: scale(1.05);
  }
}

/* Light mode hero background */
.light .landing-hero {
  position: relative;
  background:
    linear-gradient(to top, rgb(255, 255, 255) 0%, transparent 15%, transparent 90%, rgb(255, 255, 255) 100%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 30%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1602 1602'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat,
    linear-gradient(225deg, var(--accent-a6) 0%, transparent 15%, transparent 85%, var(--accent-a6) 100%);
}

.light .landing-hero::before,
.light .landing-hero::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.light .landing-hero::before {
  background: radial-gradient(circle at top right, var(--accent-a6) 0%, transparent 40%);
  opacity: 0.15;
  animation: breathe-corner-1 8s ease-in-out infinite;
}

.light .landing-hero::after {
  background: radial-gradient(circle at bottom left, var(--accent-a6) 0%, transparent 40%);
  opacity: 0.12;
  animation: breathe-corner-2 8s ease-in-out infinite 4s;
}

/* Dark mode hero background */
.dark .landing-hero {
  position: relative;
  background:
    linear-gradient(to top, var(--header-background) 0%, transparent 15%, transparent 90%, var(--header-background) 100%),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 30%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1602 1602'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat,
    linear-gradient(135deg, rgba(232, 119, 34, 0.12) 0%, transparent 15%, transparent 85%, rgba(11, 83, 81, 0.1) 100%);
}

.dark .landing-hero::before,
.dark .landing-hero::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.dark .landing-hero::before {
  background: radial-gradient(circle at top right, rgba(232, 119, 34, 1) 0%, transparent 40%);
  opacity: 0.08;
  animation: breathe-corner-1 8s ease-in-out infinite;
}

.dark .landing-hero::after {
  background: radial-gradient(circle at bottom left, rgba(11, 83, 81, 1) 0%, transparent 40%);
  opacity: 0.06;
  animation: breathe-corner-2 8s ease-in-out infinite 4s;
}

/* Hero layout */
.landing-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
}

.landing-hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  margin-bottom: 4rem;
}

.landing-hero-text {
  flex: 1;
  text-align: left;
  max-width: 500px;
}

.landing-hero-image-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.landing-hero-image {
  max-width: 90%;
  height: auto;
  border-radius: 12px;
}

.landing-hero-label {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.landing-hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

/* Dark mode text colors */
:root[data-theme="dark"] .landing-hero-label {
  color: #e87722;
}

:root[data-theme="dark"] .landing-hero-title {
  color: #ffffff;
}

:root[data-theme="dark"] .landing-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

/* Hide anchor links on landing hero title */
.landing-hero .fern-anchor,
.landing-hero .heading-anchor,
.landing-hero a.anchor,
.landing-hero h1>a[aria-hidden="true"],
.landing-hero-title .fern-anchor,
.landing-hero-title .heading-anchor,
.landing-hero-title a.anchor,
.landing-hero-title>a[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

.landing-hero-subtitle {
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

/* Frosted glass cards */
.landing-hero-cards {
  width: 100%;
  max-width: 1000px;
}

.landing-hero-cards .fern-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.landing-hero-cards .fern-card:hover {
  transform: translateY(-2px);
}
.landing-hero-cards .fern-card:focus-visible {
  transform: translateY(-2px);
}

.dark .landing-hero-cards .fern-card {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .landing-hero-cards .fern-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark .landing-hero-cards .fern-card:focus-visible {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark .landing-hero-cards .fern-card-header,
.dark .landing-hero-cards .fern-card h3,
.dark .landing-hero-cards .fern-card p,
.dark .landing-hero-cards .fern-card span,
.dark .landing-hero-cards .fern-card div {
  color: #ffffff !important;
}

.dark .landing-hero-cards .fern-card p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .landing-hero {
    min-height: auto;
    padding: 40px 24px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .landing-hero-title {
    font-size: 32px;
  }

  .landing-hero-subtitle {
    font-size: 16px;
  }

  .landing-hero-container {
    gap: 30px;
  }

  .landing-hero-section {
    flex-direction: column;
    gap: 40px;
  }

  .landing-hero-text {
    text-align: center;
    max-width: 100%;
  }

  .landing-hero-image-container {
    justify-content: center;
  }

}

/* ===== Variant Selector Styles ===== */

.fern-variant-selector {

  .fern-selection-item {
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 8px 11px;
  }

  .fern-selection-item-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

}

.fern-selection-item .fern-selection-item-icon.use-icon {
  border: none !important;
  margin: 0 8px 0 8px !important;
  height: 36px;
  width: 24px;
}

.fern-selection-item .fern-selection-item-icon .fern-file-icon {
  height: 16px !important;
  width: 16px !important;
}

.fern-selection-item:hover .fern-file-icon,
.fern-selection-item:hover svg {
  scale: none;
}
.fern-selection-item:focus-within .fern-file-icon,
.fern-selection-item:focus-within svg {
  scale: none;
}

.fern-selection-item .fern-selection-item-title {
  font-weight: 500;
  font-size: 14px;
}

.fern-variant-selector .fern-selection-item > div {
  gap: 0 !important;
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] {
  margin-bottom: 0;
  border-radius: 0;
  padding: 12px !important;
  display: flex;
  align-items: center;
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"]:hover {
  color: default
}
.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"]:focus-visible {
  color: default
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] > div {
  gap: 0 !important;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Hide the default checkmark */
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  .lucide.lucide-check.size-icon {
  display: none;
}

/* Variant selector dropdown icon size */
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  span {
  width: 16px !important;
  height: 16px !important;
}

.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  svg {
  width: 16px !important;
  height: 16px !important;
}

.fern-dropdown-item[role="menuitemradio"] p {
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  flex: 1;
}

.fern-selection-item-end-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Variant Selector Dropdown Styles */
.fern-variant-selector-dropdown [data-radix-scroll-area-viewport] {
  padding: 0 !important;
}

.fern-variant-selector-dropdown {
  width: var(--radix-dropdown-menu-trigger-width) !important;
  max-height: none !important;
}

[data-radix-popper-content-wrapper]:has(.fern-variant-selector-dropdown) {
  min-width: 0 !important;
}

/* Dropdown & selection item hover states */
.fern-variant-selector > fern-selection-item:hover,
.fern-selection-item[data-testid="variant-dropdown"]:hover,
.fern-dropdown-item:hover,
.fern-product-item > div.fern-selection-item:hover {
  background: var(--gray-0) !important;
}
.fern-variant-selector > fern-selection-item:focus-visible,
.fern-selection-item[data-testid="variant-dropdown"]:focus-visible,
.fern-dropdown-item:focus-visible,
.fern-product-item > div.fern-selection-item:focus-visible {
  background: var(--gray-0) !important;
}

.fern-dropdown-item:hover {
  border: none !important;
}
.fern-dropdown-item:focus-visible {
  border: none !important;
}

.fern-dropdown-item:hover * {
  color: #0b5351 !important;
}
.fern-dropdown-item:focus-within * {
  color: #0b5351 !important;
}

.fern-dropdown-item[role="menuitemradio"] > div > div {
  border: none !important;
}

/* ===== API Store ===== */

/* Light mode (default) */
#nt-api-store {
  --bg: #eef3f6;
  --bg2: #dfe9ee;
  --text: #0c2434;
  --mut: #51636f;
  --accent: #0fae93;
  --ink: #04241e;
  --rule: #b9ccd6;
  --icon: #117392;
  --sub: #2c3e4a;
  --nav: #6a7c89;
  font-family: 'Work Sans', -apple-system, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}
#nt-api-store *, #nt-api-store *::before, #nt-api-store *::after {
  box-sizing: border-box;
}
/* Dark mode — driven by Fern's .dark class on <html> */
.dark #nt-api-store {
  --bg: #0a1a28;
  --bg2: #102537;
  --text: #ffffff;
  --mut: #9fb3c0;
  --accent: #19d3b5;
  --ink: #04241e;
  --rule: #2a4a60;
  --icon: #1e85a0;
  --sub: #cdd9e1;
  --nav: #7d93a1;
}

#nt-api-store .nt-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 200;
  height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 21px;
  border: 1px solid var(--rule);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: border-color 0.15s;
}
#nt-api-store .nt-back:hover { border-color: var(--accent); }
#nt-api-store .nt-back:focus-visible { border-color: var(--accent); }

/* screens */
#nt-api-store .nt-screen { display: none; }
#nt-api-store .nt-screen.active { display: block; }

/* Landing */
#nt-api-store .nt-landing {
  position: relative;
  height: calc(100vh - 56px);
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);
}
#nt-api-store .nt-landing canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
#nt-api-store .nt-landing-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(125% 90% at -5% -10%, var(--bg) 16%, transparent 62%);
}
#nt-api-store .nt-landing-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 48px) clamp(24px, 5.5vw, 104px) clamp(24px, 3vw, 48px);
}
#nt-api-store .nt-landing-hero {
  width: min(720px, 94%);
  padding-top: clamp(16px, 2.5vw, 32px);
}
#nt-api-store .nt-landing-hero h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 5.7vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--text);
}
#nt-api-store .nt-landing-hero p {
  margin: clamp(14px, 2vw, 24px) 0 0;
  max-width: 33em;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--sub);
  font-weight: 500;
}
#nt-api-store .nt-cta {
  background: var(--accent);
  color: var(--ink);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  transition: filter 0.15s;
}
#nt-api-store .nt-cta:hover { filter: brightness(1.08); }
#nt-api-store .nt-cta:focus-visible { filter: brightness(1.08); }
#nt-api-store a.nt-cta { text-decoration: none !important; }
#nt-api-store .nt-postman-btn {
  background: #ff6c37;
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: filter 0.15s;
}
#nt-api-store .nt-postman-btn:hover { filter: brightness(0.92); }
#nt-api-store .nt-postman-btn:focus-visible { filter: brightness(0.92); }
#nt-api-store .nt-postman-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
#nt-api-store .nt-postman-btn p { display: inline; margin: 0; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; }
#nt-api-store .nt-postman-btn span { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; }
#nt-api-store .nt-cta-sm {
  background: var(--accent);
  color: var(--ink);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  transition: filter 0.15s;
}
#nt-api-store .nt-cta-sm:hover { filter: brightness(1.08); }
#nt-api-store .nt-cta-sm:focus-visible { filter: brightness(1.08); }
#nt-api-store .nt-cta-xs {
  background: var(--accent);
  color: var(--ink);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  width: fit-content;
  transition: filter 0.15s;
}
#nt-api-store a.nt-cta-xs { text-decoration: none !important; }
#nt-api-store .nt-cta-xs:hover { filter: brightness(1.08); }
#nt-api-store .nt-cta-xs:focus-visible { filter: brightness(1.08); }
#nt-api-store .nt-landing-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: clamp(20px, 2.5vw, 32px);
}
#nt-api-store .nt-landing-footer-title {
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Get Started */
#nt-api-store .nt-getstarted {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
#nt-api-store .nt-getstarted canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 95% at 78% 60%, #000 18%, rgba(0,0,0,0.45) 55%, transparent 86%);
  mask-image: radial-gradient(120% 95% at 78% 60%, #000 18%, rgba(0,0,0,0.45) 55%, transparent 86%);
}
#nt-api-store .nt-gs-fade1 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 30%, transparent 76%);
}
#nt-api-store .nt-gs-fade2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
#nt-api-store .nt-gs-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: flex-start;
}
/* .nt-gs-content  {
  padding: clamp(54px, 6vw, 88px) clamp(24px, 5vw, 72px) clamp(60px, 8vw, 120px); */
/* } */

#nt-api-store .nt-gs-nav {
  flex: 0 0 auto;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 84px;
}
#nt-api-store .nt-gs-nav span {
  font-size: 15px;
  cursor: pointer;
  transition: color 0.15s;
}
#nt-api-store .nt-gs-nav span.active { color: var(--text); font-weight: 600; }
#nt-api-store .nt-gs-nav span:not(.active) { color: var(--nav); font-weight: 400; }
#nt-api-store .nt-gs-nav span:hover { color: var(--text); }
#nt-api-store .nt-gs-nav span:focus-visible { color: var(--text); }
#nt-api-store .nt-gs-body { flex: 1 1 440px; max-width: 600px; }
#nt-api-store .nt-gs-body h2 {
  margin: 0 0 clamp(30px, 4vw, 52px);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--text);
  opacity: 0.92;
  letter-spacing: -0.01em;
}
#nt-api-store .nt-steps { display: flex; flex-direction: column; gap: clamp(42px, 6vw, 76px); }
#nt-api-store .nt-step-num {
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
}
#nt-api-store .nt-step-rule {
  height: 1px;
  background: var(--rule);
  margin: 12px 0 20px;
}
#nt-api-store .nt-step-inner {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
}
#nt-api-store .nt-step-text { flex: 1 1 auto; }
#nt-api-store .nt-step-text h3 {
  margin: 0;
  font-weight: 400;
  font-size: 21px;
  color: var(--mut);
  letter-spacing: -0.005em;
}
#nt-api-store .nt-step-text p {
  margin: 14px 0 0;
  max-width: 21em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sub);
  font-weight: 600;
}
#nt-api-store .nt-step-icon { flex: 0 0 auto; color: var(--icon); }


/* ---- get-started panels ---- */
#nt-api-store .nt-gs-panel { display: none; }
#nt-api-store .nt-gs-panel.active { display: block; }

/* ---- prose ---- */
#nt-api-store .nt-prose h3 {
  margin: clamp(28px, 3vw, 40px) 0 12px;
  font-weight: 400;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.005em;
}
#nt-api-store .nt-prose p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sub);
  font-weight: 500;
}
#nt-api-store .nt-prose strong { color: var(--text); font-weight: 600; }
#nt-api-store .nt-prose code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--accent);
}

/* ---- info cards ---- */
#nt-api-store .nt-info-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
#nt-api-store .nt-info-card {
  flex: 1 1 200px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
#nt-api-store .nt-info-card-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
#nt-api-store .nt-info-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut);
}

/* ---- callout ---- */
#nt-api-store .nt-callout {
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
#nt-api-store .nt-callout-warn {
  border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,0.08);
  color: var(--sub);
}
#nt-api-store .nt-callout strong { color: #f59e0b; }

/* ---- detail list ---- */
#nt-api-store .nt-detail-list { margin: 0 0 28px; display: flex; flex-direction: column; gap: 0; }
#nt-api-store .nt-detail-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
#nt-api-store .nt-detail-item:first-child { border-top: 1px solid var(--rule); }
#nt-api-store .nt-detail-label {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
#nt-api-store .nt-detail-item p { margin: 0; font-size: 14px; color: var(--mut); line-height: 1.5; }

/* ---- numbered steps ---- */
#nt-api-store .nt-numbered-steps { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; }
#nt-api-store .nt-n-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
#nt-api-store .nt-n-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
#nt-api-store .nt-n-body { flex: 1 1 auto; padding-top: 4px; }
#nt-api-store .nt-n-body p { margin: 0 0 10px; font-size: 14px; color: var(--sub); line-height: 1.55; }
#nt-api-store .nt-n-body strong { color: var(--text); }
#nt-api-store .nt-n-body code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--accent);
}

/* ---- code blocks ---- */
#nt-api-store .nt-code-block {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
}
#nt-api-store .nt-code-label {
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--rule);
}
#nt-api-store .nt-code-block pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  background: transparent;
}
#nt-api-store .nt-code-block code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
  background: none;
  border: none;
  padding: 0;
}

/* ---- validate list ---- */
#nt-api-store .nt-validate-list { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
#nt-api-store .nt-validate-item {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
#nt-api-store .nt-validate-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
#nt-api-store .nt-validate-item p { margin: 0 0 0; font-size: 14px; color: var(--mut); line-height: 1.5; }
#nt-api-store .nt-validate-item code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--accent);
}

/* ---- step modals (appended to body, so no #nt-api-store scope) ---- */
.nt-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Work Sans', -apple-system, system-ui, sans-serif;
}
.nt-modal-overlay.active { display: flex; }
.nt-modal-overlay .nt-modal-box {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 32px 24px;
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
}
/* Theming variables for modals — mirrors #nt-api-store light/dark values */
.nt-modal-overlay {
  --bg: #eef3f6; --bg2: #dfe9ee; --text: #0c2434; --mut: #51636f;
  --accent: #0fae93; --rule: #b9ccd6;
}
.dark .nt-modal-overlay {
  --bg: #0a1a28; --bg2: #102537; --text: #ffffff; --mut: #9fb3c0;
  --accent: #19d3b5; --rule: #2a4a60;
}
.nt-modal-overlay .nt-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.nt-modal-overlay .nt-modal-title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.nt-modal-overlay .nt-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--mut);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.nt-modal-overlay .nt-modal-close:hover { color: var(--text); }
.nt-modal-overlay .nt-modal-close:focus-visible { color: var(--text); }
.nt-modal-overlay .nt-modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--mut);
  line-height: 1.55;
}
.nt-modal-overlay .nt-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.nt-modal-overlay .nt-modal-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.nt-modal-overlay .nt-modal-input:focus { border-color: var(--accent); }
.nt-modal-overlay .nt-modal-input::placeholder { color: var(--mut); opacity: 0.7; }
.nt-modal-overlay .nt-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.nt-modal-overlay .nt-modal-cancel {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #e05252;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.nt-modal-overlay .nt-modal-cancel:hover { color: #c03a3a; }
.nt-modal-overlay .nt-modal-cancel:focus-visible { color: #c03a3a; }
.nt-modal-overlay .nt-cta-xs {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.nt-modal-overlay .nt-cta-xs:hover { filter: brightness(1.08); }
.nt-modal-overlay .nt-cta-xs:focus-visible { filter: brightness(1.08); }

/* ---- collection list ---- */
.nt-modal-overlay .nt-coll-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 20px 0 8px;
}
.nt-modal-overlay .nt-coll-group-label:first-child { margin-top: 0; }
.nt-modal-overlay .nt-coll-select-all {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  float: right;
  transition: opacity 0.15s;
}
.nt-modal-overlay .nt-coll-select-all:hover { opacity: 0.75; }
.nt-modal-overlay .nt-coll-select-all:focus-visible { opacity: 0.75; }
.nt-modal-overlay .nt-coll-count {
  font-size: 11px;
  color: var(--mut);
  margin-bottom: 6px;
  clear: both;
}
.nt-modal-overlay .nt-coll-list {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}
.nt-modal-overlay .nt-coll-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.12s;
}
.nt-modal-overlay .nt-coll-item:last-child { border-bottom: none; }
.nt-modal-overlay .nt-coll-item:hover { background: var(--bg2); }
.nt-modal-overlay .nt-coll-item:focus-visible { background: var(--bg2); }
.nt-modal-overlay .nt-coll-item.checked { background: rgba(15,174,147,0.08); }
.dark .nt-modal-overlay .nt-coll-item.checked { background: rgba(25,211,181,0.09); }
.nt-modal-overlay .nt-coll-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.nt-modal-overlay .nt-coll-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  flex: 1 1 auto;
}

/* ---- selected summary ---- */
.nt-modal-overlay .nt-selected-summary {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--mut);
  line-height: 1.5;
}
.nt-modal-overlay .nt-selected-summary strong { color: var(--text); }
.nt-modal-overlay .nt-selected-summary ul {
  margin: 6px 0 0 16px;
  padding: 0;
  list-style: disc;
}
.nt-modal-overlay .nt-selected-summary li { margin-bottom: 3px; }

/* ---- loading spinner ---- */
.nt-modal-overlay .nt-modal-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--mut);
  font-size: 14px;
}
.nt-modal-overlay .nt-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: nt-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes nt-spin { to { transform: rotate(360deg); } }

/* ---- progress bar ---- */
.nt-modal-overlay .nt-progress-status {
  font-size: 14px;
  color: var(--mut);
  margin: 8px 0 10px;
}
.nt-modal-overlay .nt-progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg2);
  border-radius: 3px;
  overflow: hidden;
}
.nt-modal-overlay .nt-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.nt-modal-overlay .nt-progress-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  margin: 6px 0 0;
}

/* ---- success / error states ---- */
.nt-modal-overlay .nt-modal-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15,174,147,0.12);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin: 12px auto 14px;
  font-weight: 700;
}
.nt-modal-overlay .nt-modal-success-msg {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
}
.nt-modal-overlay #nt-postman-success {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nt-modal-overlay .nt-modal-error-msg {
  font-size: 14px;
  color: #e05252;
  background: rgba(224,82,82,0.08);
  border: 1px solid rgba(224,82,82,0.2);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  line-height: 1.5;
}

/* ---- step 4 selected table ---- */
#nt-api-store .nt-sel-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 13px;
}
#nt-api-store .nt-sel-table thead th {
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  border-bottom: 1px solid var(--rule);
}
#nt-api-store .nt-sel-table tbody tr:hover { background: var(--bg2); }
#nt-api-store .nt-sel-table tbody tr:focus-visible { background: var(--bg2); }
#nt-api-store .nt-sel-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  line-height: 1.4;
}
#nt-api-store .nt-sel-table td:first-child {
  width: 32px;
  color: var(--mut);
  font-weight: 600;
}
#nt-api-store .nt-sel-edit {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 8px 0 0;
  display: block;
  transition: opacity 0.15s;
}
#nt-api-store .nt-sel-edit:hover { opacity: 0.75; }
#nt-api-store .nt-sel-edit:focus-visible { opacity: 0.75; }

/* ---- step 5 badge on CTA ---- */
#nt-api-store .nt-api-badge {
  display: inline-block;
  margin-left: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}