/* Nomes de cachorro — isolated tool. No <table> (speed.css forces table{display:flex}). */

/* —— hero —— */
.ndc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 190px;
  margin: 8px 0 0;
  padding: 26px 32px 58px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, #eaf2fd 0%, #e4eefc 55%, #d9e7f8 100%);
  overflow: hidden;
  color: #0f2350;
}

.ndc-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 66%;
}

.ndc-hero p.ndc-hero-title {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f2350;
}

.ndc-hero p.ndc-hero-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #3d4f6a;
}

.ndc-hero p.ndc-hero-text strong {
  color: #0f2350;
  font-weight: 750;
}

.ndc-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  pointer-events: none;
}

.ndc-hero-art img {
  position: absolute;
  top: -4%;
  right: 34%;
  width: auto;
  height: 118%;
  max-width: none;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

.ndc-hero-script {
  position: absolute;
  top: 30px;
  right: 18px;
  transform: rotate(-9deg);
  font-family: "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 19px;
  line-height: 1.35;
  color: #1e4db7;
  text-align: center;
}

#ndc {
  --ndc-blue: #1a5fc8;
  --ndc-navy: #1a4fa3;
  --ndc-ink: #0f2350;
  --ndc-muted: #6b7a90;
  --ndc-line: #e6ecf5;
  --ndc-soft: #e3eefd;
  --ndc-chip: #f3f7fd;
  --ndc-head: #eef3fa;
  position: relative;
  margin: -36px 0 32px;
  padding: 6px 20px 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #e8eef8;
  box-shadow: 0 18px 40px rgba(30, 77, 183, 0.08);
  color: var(--ndc-ink);
  font-size: 16px;
  line-height: 1.4;
  isolation: isolate;
}

#ndc *,
#ndc *::before,
#ndc *::after {
  box-sizing: border-box;
}

#ndc p,
#ndc ul,
#ndc li,
#ndc h2 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

#ndc button,
#ndc input,
#ndc select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: inherit;
  margin: 0;
  max-width: none;
  width: auto;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
}

#ndc button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

#ndc svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  flex: none;
  vertical-align: middle;
}

#ndc [hidden] {
  display: none !important;
}

#ndc button:focus-visible,
#ndc select:focus-visible {
  outline: 2px solid var(--ndc-blue);
  outline-offset: 2px;
}

#ndc input.ndc-q:focus,
#ndc input.ndc-q:focus-visible {
  outline: none;
  box-shadow: none;
}

#ndc .ndc-search:focus-within {
  border-color: #b7c6dc;
}

#ndc .ndc-status {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ndc-muted);
}

/* —— app bar —— */
#ndc .ndc-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 -20px 18px;
  padding: 10px 26px;
  border-bottom: 1px solid var(--ndc-line);
}

#ndc button.ndc-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ndc-navy);
}

#ndc button.ndc-top-btn svg {
  width: 24px;
  height: 24px;
}

#ndc .ndc-top-rule {
  width: 1px;
  height: 24px;
  background: #d5deea;
  flex: none;
}

#ndc .ndc-top-title {
  flex: 1;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ndc-navy);
}

#ndc .ndc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ndc-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* —— extra filters —— */
#ndc .ndc-extra {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ndc-soft);
}

#ndc .ndc-extra-count {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ndc-muted);
}

#ndc .ndc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

#ndc button.ndc-clear {
  height: 38px;
  color: var(--ndc-blue);
  font-size: 14px;
  font-weight: 700;
}

/* —— search row —— */
#ndc .ndc-searchrow {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr) 152px;
  gap: 12px;
  margin: 0 0 18px;
  align-items: stretch;
}

#ndc select.ndc-sort {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 48px 0 22px;
  border: 2px solid #fff;
  border-radius: 12px;
  background-color: var(--ndc-blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5L7 7l5.5-5.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px 9px;
  box-shadow: 0 0 0 1px #c9d8ee, 0 4px 10px rgba(26, 95, 200, 0.18);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

#ndc .ndc-search {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 18px;
  border: 1px solid #d9e3f2;
  border-radius: 12px;
  background: #fff;
  color: #94a3b8;
  min-width: 0;
}

#ndc .ndc-search svg {
  width: 26px;
  height: 26px;
  color: var(--ndc-navy);
}

#ndc input.ndc-q {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 17px;
  color: var(--ndc-ink);
}

#ndc input.ndc-q::placeholder {
  color: #7d8a9c;
  opacity: 1;
}

#ndc input.ndc-q::-webkit-search-decoration,
#ndc input.ndc-q::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#ndc button.ndc-x {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: #8a96a8;
}

#ndc button.ndc-search-btn {
  height: 58px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--ndc-blue);
  box-shadow: 0 4px 10px rgba(26, 95, 200, 0.2);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

#ndc button.ndc-search-btn:hover {
  filter: brightness(1.05);
}

/* —— tamanho —— */
#ndc .ndc-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

#ndc .ndc-size .ndc-chip-row {
  gap: 12px;
  margin: 0;
}

#ndc .ndc-size-k {
  margin-right: 14px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ndc-muted);
}

#ndc button.ndc-chip {
  height: 46px;
  padding: 0 24px;
  border: 1px solid #dfe6f0;
  border-radius: 999px;
  background: #fff;
  color: var(--ndc-ink);
  font-size: 17px;
  font-weight: 500;
}

#ndc .ndc-extra button.ndc-chip {
  height: 38px;
  padding: 0 16px;
  font-size: 15px;
}

#ndc button.ndc-chip.is-on {
  background: var(--ndc-soft);
  border-color: #cfe0fa;
  color: var(--ndc-navy);
}

#ndc .ndc-extra button.ndc-chip.is-on {
  background: #fff;
  border-color: var(--ndc-blue);
}

#ndc button.ndc-az {
  min-width: 36px;
  padding: 0;
}

/* —— export —— */
#ndc .ndc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}

#ndc button.ndc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 184px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  color: var(--ndc-ink);
  font-size: 17px;
  font-weight: 500;
}

#ndc button.ndc-action svg {
  width: 26px;
  height: 26px;
}

#ndc .ndc-favbox button.ndc-action {
  min-width: 0;
  height: 42px;
  font-size: 15px;
}

#ndc button.ndc-action:hover:not(:disabled) {
  border-color: #c9dbff;
  color: var(--ndc-navy);
}

#ndc button.ndc-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* —— favoritos drawer —— */
#ndc .ndc-favbox {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ndc-soft);
}

#ndc .ndc-fav-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

#ndc .ndc-fav-title {
  font-size: 16px;
  font-weight: 800;
}

#ndc .ndc-fav-n {
  margin-right: auto;
  font-size: 13px;
  color: var(--ndc-muted);
}

#ndc button.ndc-fav-close {
  min-height: 36px;
  padding: 4px 8px;
  color: var(--ndc-muted);
  font-weight: 700;
}

#ndc .ndc-fav-list {
  max-height: 160px;
  overflow: auto;
  margin: 0 0 10px;
}

#ndc .ndc-fav-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

#ndc button.ndc-fav-open {
  flex: 1;
  text-align: left;
  padding: 6px 0;
  font-weight: 700;
  color: var(--ndc-navy);
}

#ndc button.ndc-fav-x {
  min-height: 32px;
  padding: 0 8px;
  color: var(--ndc-muted);
}

#ndc .ndc-fav-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* —— list (not a <table>) —— */
#ndc .ndc-sheet {
  overflow-x: auto;
  border: 1px solid var(--ndc-line);
  border-radius: 12px;
  background: var(--ndc-head);
}

#ndc .ndc-line {
  display: grid;
  grid-template-columns: 70px minmax(140px, 1.25fr) minmax(150px, 0.85fr) minmax(180px, 1.8fr) 56px;
  align-items: center;
  min-height: 50px;
  column-gap: 0;
  padding: 0;
}

#ndc .ndc-cols {
  min-height: 54px;
  color: var(--ndc-ink);
  font-size: 17px;
  font-weight: 600;
}

#ndc .ndc-cols > * {
  align-self: stretch;
}

#ndc button.ndc-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 20px 0 12px;
  border-right: 1px solid #dde5f0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ndc-ink);
  cursor: pointer;
}

#ndc button.ndc-col[data-sort="significado"] {
  justify-content: flex-start;
  border-right: 0;
  padding-left: 20px;
}

#ndc button.ndc-col-origem {
  padding-left: 20px;
}

#ndc button.ndc-col::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 18px;
  opacity: 0.45;
  background: #6b7a90;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='black' d='M4 0l3.5 6h-7L4 0zm0 16L.5 10h7L4 16z'/></svg>")
    center / contain no-repeat;
}

#ndc button.ndc-col[data-sort="significado"]::after {
  display: none;
}

#ndc button.ndc-col.is-on::after {
  opacity: 0.8;
}

#ndc .ndc-row {
  background: #fff;
  border-top: 1px solid var(--ndc-line);
  cursor: pointer;
}

#ndc .ndc-row > .ndc-origem {
  margin-left: 20px;
}

#ndc .ndc-row > .ndc-sign {
  padding-left: 20px;
}

#ndc .ndc-row:first-child {
  border-top: 0;
}

#ndc .ndc-row:hover {
  background: #fbfdff;
}

#ndc .ndc-row.is-on {
  background: #f3f8ff;
}

#ndc button.ndc-heart {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

#ndc button.ndc-heart svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #8793a5;
  stroke-width: 1.6;
}

#ndc button.ndc-heart.is-on svg {
  fill: var(--ndc-blue);
  stroke: var(--ndc-blue);
}

#ndc .ndc-nome {
  padding-left: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ndc-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ndc .ndc-sign {
  color: #4a5a70;
  font-size: 16px;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

#ndc .ndc-chev {
  color: #5b6b82;
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

#ndc .ndc-origem {
  display: inline-block;
  justify-self: start;
  padding: 5px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  background: #eef2f7;
  color: #44566f;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ndc .ndc-origem-hebraica { background: #e3eefd; color: #2f64c7; }
#ndc .ndc-origem-germanica { background: #dcf3e4; color: #23884a; }
#ndc .ndc-origem-latina { background: #fdf0d9; color: #b46f10; }
#ndc .ndc-origem-grega { background: #eee4ff; color: #7c3aed; }
#ndc .ndc-origem-tupi { background: #d5f4ee; color: #0f766e; }
#ndc .ndc-origem-inglesa { background: #e4e9ff; color: #3f51b5; }
#ndc .ndc-origem-nordica { background: #fde2e2; color: #c0392b; }
#ndc .ndc-origem-portuguesa { background: #ffe6cc; color: #d35400; }
#ndc .ndc-origem-arabe { background: #fde7f3; color: #c2185b; }
#ndc .ndc-origem-italiana { background: #fde8d8; color: #b45309; }
#ndc .ndc-origem-francesa { background: #e0e7ff; color: #4338ca; }
#ndc .ndc-origem-espanhola { background: #fce7f3; color: #be185d; }
#ndc .ndc-origem-celta { background: #e2e8f0; color: #475569; }
#ndc .ndc-origem-japonesa { background: #ffe4e6; color: #e11d48; }
#ndc .ndc-origem-persa { background: #fef3c7; color: #b45309; }
#ndc .ndc-origem-eslava { background: #dbeafe; color: #1d4ed8; }
#ndc .ndc-origem-fenicia { background: #f1f5f9; color: #334155; }
#ndc .ndc-origem-havaiana { background: #ccfbf1; color: #0f766e; }
#ndc .ndc-origem-sanscrita { background: #fae8ff; color: #a21caf; }
#ndc .ndc-origem-ficcao { background: #e0f2fe; color: #0369a1; }

#ndc .ndc-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ndc-muted);
}

#ndc button.ndc-more {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  height: 44px;
  border: 1px solid #e4ebf5;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  color: var(--ndc-ink);
  text-align: center;
}

html[data-theme="dark"] #ndc {
  background: var(--dica-surface, #1a1f2e);
  border-color: var(--dica-border, #2a3344);
  color: var(--dica-ink, #f1f5f9);
}
html[data-theme="dark"] #ndc .ndc-search,
html[data-theme="dark"] #ndc button.ndc-chip,
html[data-theme="dark"] #ndc button.ndc-action,
html[data-theme="dark"] #ndc button.ndc-more,
html[data-theme="dark"] #ndc .ndc-row {
  background: var(--dica-surface, #1a1f2e);
  border-color: var(--dica-border, #2a3344);
  color: var(--dica-ink, #f1f5f9);
}
html[data-theme="dark"] #ndc .ndc-sheet {
  background: #121826;
}
html[data-theme="dark"] #ndc .ndc-nome,
html[data-theme="dark"] #ndc .ndc-top-title,
html[data-theme="dark"] #ndc button.ndc-fav-open {
  color: #93c5fd;
}
html[data-theme="dark"] #ndc input.ndc-q {
  color: var(--dica-ink, #f1f5f9);
}
html[data-theme="dark"] #ndc .ndc-row.is-on {
  background: #1e293b;
}

html[data-theme="dark"] .ndc-hero {
  background: linear-gradient(90deg, #16213a 0%, #1a2946 100%);
  color: #f1f5f9;
}
html[data-theme="dark"] .ndc-hero p.ndc-hero-title,
html[data-theme="dark"] .ndc-hero p.ndc-hero-text strong {
  color: #f1f5f9;
}
html[data-theme="dark"] .ndc-hero p.ndc-hero-text {
  color: #cbd5e1;
}
html[data-theme="dark"] .ndc-hero-script {
  color: #93c5fd;
}
html[data-theme="dark"] #ndc .ndc-top-btn,
html[data-theme="dark"] #ndc .ndc-cols,
html[data-theme="dark"] #ndc button.ndc-col {
  color: #dbe7fb;
}
html[data-theme="dark"] #ndc select.ndc-sort {
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 1100px) {
  #ndc .ndc-searchrow {
    grid-template-columns: 220px minmax(0, 1fr) 128px;
  }
  #ndc button.ndc-action {
    min-width: 0;
  }
  .ndc-hero-script {
    display: none;
  }
  .ndc-hero-art img {
    right: -4%;
  }
}

@media (max-width: 860px) {
  .ndc-hero {
    padding: 22px 20px 54px;
  }
  .ndc-hero-copy {
    max-width: 68%;
  }
  .ndc-hero p.ndc-hero-title {
    font-size: 24px;
  }
  .ndc-hero p.ndc-hero-text {
    font-size: 15px;
  }
  .ndc-hero p.ndc-hero-text br {
    display: none;
  }
  #ndc .ndc-searchrow {
    grid-template-columns: 1fr;
  }
  #ndc select.ndc-sort,
  #ndc .ndc-search {
    height: 50px;
  }
  #ndc input.ndc-q {
    height: 48px;
  }
  #ndc button.ndc-chip {
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }
  #ndc button.ndc-action {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
  }
  #ndc button.ndc-top-btn,
  #ndc .ndc-top-title {
    font-size: 16px;
  }
  #ndc .ndc-line {
    grid-template-columns: 52px minmax(110px, 1.1fr) 140px minmax(120px, 1.4fr);
  }
  #ndc .ndc-nome {
    font-size: 17px;
  }
  #ndc button.ndc-search-btn,
  #ndc .ndc-chev,
  #ndc .ndc-col-go {
    display: none;
  }
}

@media (max-width: 640px) {
  #ndc {
    padding: 4px 14px 14px;
  }
  #ndc .ndc-top {
    margin: 0 -14px 14px;
    padding: 6px 16px;
  }
  .ndc-hero {
    min-height: 0;
  }
  .ndc-hero-copy {
    max-width: 100%;
  }
  .ndc-hero-art {
    opacity: 0.25;
  }
  #ndc .ndc-size-k {
    width: 100%;
  }
  #ndc .ndc-row > .ndc-sign {
    padding-left: 12px;
  }
  #ndc .ndc-top-title,
  #ndc .ndc-top-rule {
    display: none;
  }
  #ndc .ndc-top {
    justify-content: space-between;
  }
  #ndc .ndc-line {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.3fr);
  }
  #ndc .ndc-origem,
  #ndc button.ndc-col-origem {
    display: none;
  }
  #ndc .ndc-nome {
    white-space: normal;
  }
}

/* —— baby name themes (menino / menina) —— */
.ndc-hero--menina {
  background: linear-gradient(90deg, #fdf2f5 0%, #fce8ee 55%, #f6d5e0 100%);
  color: #4a2030;
}
.ndc-hero--menina p.ndc-hero-title,
.ndc-hero--menina p.ndc-hero-text strong {
  color: #4a2030;
}
.ndc-hero--menina p.ndc-hero-text {
  color: #7a4a58;
}
.ndc-hero--menina .ndc-hero-script {
  color: #c45d78;
}

#ndc.ndc-theme-menina {
  --ndc-blue: #e37690;
  --ndc-navy: #c45d78;
  --ndc-ink: #4a2030;
  --ndc-muted: #8a6b76;
  --ndc-line: #f3e4e8;
  --ndc-soft: #fdecef;
  --ndc-chip: #fdf6f8;
  --ndc-head: #fbeff2;
  border-color: #f3e4e8;
  box-shadow: 0 18px 40px rgba(196, 93, 120, 0.08);
}

#ndc.ndc-theme-menina select.ndc-sort {
  box-shadow: 0 0 0 1px #f3c5d0, 0 4px 10px rgba(227, 118, 144, 0.18);
}
#ndc.ndc-theme-menina button.ndc-search-btn {
  box-shadow: 0 4px 10px rgba(227, 118, 144, 0.2);
}
#ndc.ndc-theme-menina .ndc-search:focus-within {
  border-color: #e7b3c0;
}
#ndc.ndc-theme-menina .ndc-row:hover {
  background: #fffafb;
}
#ndc.ndc-theme-menina .ndc-row.is-on {
  background: #fff5f8;
}
#ndc.ndc-theme-menina button.ndc-action:hover:not(:disabled) {
  border-color: #f3c5d0;
}

#ndc .ndc-origem-chinesa { background: #fee2e2; color: #b91c1c; }
#ndc .ndc-origem-egipcia { background: #fef9c3; color: #a16207; }
#ndc .ndc-origem-armenia { background: #ffe4e6; color: #9f1239; }

#ndc .ndc-surname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

#ndc input.ndc-sn {
  height: 46px;
  min-width: 180px;
  padding: 0 16px;
  border: 1px solid #d9e3f2;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  color: var(--ndc-ink);
}

#ndc input.ndc-sn:focus,
#ndc input.ndc-sn:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: #b7c6dc;
}

#ndc.ndc-theme-menina input.ndc-sn:focus,
#ndc.ndc-theme-menina input.ndc-sn:focus-visible {
  border-color: #e7b3c0;
}

#ndc .ndc-preview {
  flex: 1;
  min-width: 160px;
  font-size: 15px;
  color: var(--ndc-muted);
}

#ndc .ndc-preview strong {
  color: var(--ndc-navy);
  font-weight: 700;
}

#ndc .ndc-iniciais {
  margin-left: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ndc-muted);
}

html[data-theme="dark"] .ndc-hero--menina {
  background: linear-gradient(90deg, #2a1620 0%, #3a1c28 100%);
}
html[data-theme="dark"] .ndc-hero--menina .ndc-hero-script {
  color: #f9a8c4;
}
html[data-theme="dark"] #ndc.ndc-theme-menina .ndc-nome,
html[data-theme="dark"] #ndc.ndc-theme-menina .ndc-top-title,
html[data-theme="dark"] #ndc.ndc-theme-menina button.ndc-fav-open {
  color: #f9a8c4;
}
html[data-theme="dark"] #ndc input.ndc-sn {
  background: var(--dica-surface, #1a1f2e);
  border-color: var(--dica-border, #2a3344);
  color: var(--dica-ink, #f1f5f9);
}

@media (max-width: 640px) {
  #ndc input.ndc-sn {
    width: 100%;
    min-width: 0;
  }
}