/* =========================================================
   BASE
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  /* se preferir Manrope, troque aqui */
  background: #f6f6f6;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

/* [+] melhoria: ajudar a evitar "pulo" quando surge a scrollbar */
html {
  /* [+] melhoria */
  scrollbar-gutter: stable both-edges;
}

/* =========================================================
   HEADER
   ========================================================= */
header {
  background: #fff;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  /* border-bottom: 1px solid #ddd; /* corrigido */
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo no header */
#app-title.brand {
  display: flex;
  align-items: center;
}

#app-title .brand-link {
  display: inline-flex;
  align-items: center;
}

#app-title .logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 26vw;
}

@media (min-width:480px) {
  #app-title .logo {
    height: 40px;
  }
}

@media (orientation:landscape) and (hover:none) {
  #app-title .logo {
    height: 40px;
  }
}

/* Ações à direita (idioma/tema) */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Botões “pílula” (idioma e tema com o MESMO estilo) */
.pill-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  padding: .35rem .55rem;
  border-radius: 100px;
  cursor: pointer;
  font-size: 18px;
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .08s;
  /* [+] melhoria: melhor toque em mobile */
  -webkit-tap-highlight-color: transparent;
  /* [+] */
  touch-action: manipulation;
  /* [+] */
}

.pill-btn:hover {
  background: #f5f5f5;
}

.pill-btn:active {
  transform: scale(.98);
}

/* =========================================================
   NAV / ABAS
   ========================================================= */
nav {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
  padding: 0 1rem;
  /* será alinhado pelo FRAME ÚNICO mais abaixo */
}

nav button {
  flex: 1;
  padding: .8rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all .3s;
  white-space: nowrap;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  hyphens: none;
  /* [+] melhoria: foco visível para teclado */
  outline-offset: 3px;
  /* [+] */
}

nav button.active {
  color: #3B82F6;
  border-bottom: 3px solid #3B82F6;
}

/* [+] melhoria: acessibilidade de abas/painéis (esconde painel inativo por ARIA) */
[role="tabpanel"][aria-hidden="true"] {
  /* [+] */
  display: none !important;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

@media(min-width:600px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* única definição de hidden */
.hidden {
  display: none !important;
}

/* [+] melhoria: comportamento padrão do atributo HTML [hidden] */
[hidden] {
  /* [+] */
  display: none !important;
}

.cat-title {
  color: #282725;
  font-size: 18px;
  font-weight: 500;
  margin: 0px 0 10px 0 !important;
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: #fff;
  border-radius: 12px;
  padding: .8rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  color: #615f5c;
}

.card:hover {
  background: #e8f0fe;
}

.card.selected {
  border-color: #3B82F6;
  background: #e8f0fe;
}

.card span.icon {
  font-size: 2rem;
  margin-bottom: .3rem;
}

/* =========================================================
   INPUTS / BUTTONS
   ========================================================= */
.btn {
  background: #3B82F6;
  color: #fff;
  border: none;
  padding: .6rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .3s;
  height: 44px;
  /* [+] melhoria: melhor toque em mobile */
  -webkit-tap-highlight-color: transparent;
  /* [+] */
  touch-action: manipulation;
  /* [+] */
}

.btn:hover {
  background: #2563eb;
}

.btn:disabled {
  background: #b0c4f0;
  cursor: not-allowed;
}

.flex-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}

.flex-row input {
  flex: 1;
  padding: .9rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: .8rem;
}


/* =========================================================
   CHIPS (“Minhas tas”)
   ========================================================= */
#chip-area-wrap {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: .6rem;
  margin-top: .6rem;
}

/* Esconde o contêiner quando #chip-area não tem nada dentro */
#chip-area-wrap:has(#chip-area:empty) {
  display: none;
}

#chip-area {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .75rem;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  font-weight: 500;
  font-size: .92rem;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s, transform .08s;
  max-width: 100%;
}

.chip:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.chip:active {
  transform: scale(.98);
}

.chip.active {
  background: #eff6ff;
  color: #1e40af;
}

.chip .chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  opacity: .7;
  color: inherit;
  transition: background .2s, opacity .2s;
  -webkit-user-select: none;
  user-select: none;
}

.chip .chip-close:hover {
  opacity: 1;
  background: #e5e7eb;
}

.chip>span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   LISTA ATIVA
   ========================================================= */
#active-list-items {
  margin-top: .8rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
}

.item-row {
  padding: .75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.item-row:last-child {
  border-bottom: none;
}

.item-main {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.item-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.item-name {
  flex: 1;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.item-name.checked {
  color: #999;
  text-decoration: line-through;
}

.item-edit {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.item-edit input[type="number"] {
  width: 44px;
  font-size: .8rem;
  padding: .4rem .5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.item-edit input[type="number"]::-webkit-outer-spin-button,
.item-edit input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.item-edit select {
  padding: .45rem .6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  min-width: 84px;
  font-size: .8rem;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1 L5 5 L9 1' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 10px 6px;
  padding-right: 1.6rem;
}

/* Segunda linha: observação + contador */
.item-note {
  display: flex;
  align-items: center;
  gap: 0rem;
  padding-left: calc(16px + .8rem);
  margin-top: .6rem;
}

.item-note input[type="text"] {
  flex: 1;
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: .8rem;
  margin-right: 0.5rem;
}

.char-count {
  margin-left: .35rem;
  font-size: .8rem;
  color: #6b7280;
  text-align: right;
}

/* =========================================================
   SELECT DE LISTAS
   ========================================================= */
#list-select {
  margin-bottom: 20px !important;
  /* ajuste 16–32px ao seu gosto */
  padding: .6rem 1rem;
  height: 44px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  width: 100%;
}

/* =========================================================
   SUAVIDADE
   ========================================================= */
.fade-in {
  animation: fade .18s ease-out;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(2px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* [+] melhoria: respeitar usuários que pedem menos animação */
@media (prefers-reduced-motion: reduce) {

  /* [+] */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   ITENS GRID
   ========================================================= */
.items-grid {
  margin-top: 8px;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

#items-section .card span.icon {
  display: none;
}

#items-section .card-text {
  font-size: .9rem;
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (min-width:600px) {
  #items-section .card {
    min-height: 140px;
  }
}

/* =========================================================
   FOOTER ALERT / TOAST
   ========================================================= */
#footer-alert {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: .8rem 1rem;
  display: none;
  z-index: 1000;
  font-weight: 500;
  align-items: center;
  gap: .6rem;
  color: #fff;
  justify-content: space-between;
}

#footer-alert.success {
  background: #34d399;
}

#footer-alert.error {
  background: #f87171;
}

#footer-alert .undo-btn {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  padding: .4rem .8rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

#footer-alert .undo-btn:hover {
  background: rgba(255, 255, 255, .25);
}

#footer-alert #close-footer-alert {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: .2rem .4rem;
  border-radius: 6px;
}

#footer-alert #close-footer-alert:hover {
  background: rgba(255, 255, 255, .18);
}

#footer-alert-msg {
  line-height: 1.2;
}

/* =========================================================
   BOTÃO “ADICIONAR À LISTA”
   ========================================================= */
#add-to-list-btn {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  background: #3B82F6;
  color: #fff;
  border: none;
  padding: .8rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease;
  /* [+] melhoria: toque */
  -webkit-tap-highlight-color: transparent;
  /* [+] */
  touch-action: manipulation;
  /* [+] */
}

#add-to-list-btn:hover {
  background: #2563eb;
}

#add-to-list-btn:disabled {
  background: #b0c4f0;
  cursor: not-allowed;
  opacity: 1;
}

#add-to-list-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}

#items-div {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

/* =========================================================
   iOS: EVITAR ZOOM AO FOCAR INPUTS
   ========================================================= */
@supports (-webkit-text-size-adjust:100%) {
  html {
    -webkit-text-size-adjust: 100%;
  }
}

@supports (text-size-adjust:100%) {
  html {
    text-size-adjust: 100%;
  }
}

input,
select,
textarea,
button {
  font-size: 16px;
}

@supports (-webkit-touch-callout:none) {

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
}

/* =========================================================
   TEXTO/QUEBRA & ABAS EM TELAS MUITO ESTREITAS
   ========================================================= */

#app-title,
.cat-title,
nav button,
.btn {
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width:360px) {
  nav button {
    font-size: .95rem;
  }
}

/* =========================================================
   OVERLAY “SÓ MOBILE” (se usar)
   ========================================================= */
#desktop-blocker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

#desktop-blocker.show {
  display: flex;
}

#desktop-blocker p {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: 1.25rem 1.5rem;
  max-width: 280px;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  position: relative;
  animation: cardUp .5s ease-out both;
}

#desktop-blocker p::before {
  content: "📱";
  display: block;
  font-size: 4rem;
  margin-bottom: .5rem;
  animation: phoneTap 2.2s ease-in-out infinite .8s;
}

#desktop-blocker p::after {
  content: "👆";
  position: absolute;
  left: 45%;
  top: 4rem;
  transform: translate(26px, 18px) rotate(-10deg);
  font-size: 2.5rem;
  opacity: 0;
  animation: handTap 2.2s ease-in-out infinite .8s;
}

@keyframes cardUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes handTap {
  0% {
    opacity: 0;
    transform: translate(25px, 12px) rotate(-10deg) scale(1);
  }

  28% {
    opacity: 1;
    transform: translate(4px, -2px) rotate(-10deg) scale(1);
  }

  40% {
    transform: translate(0, -6px) rotate(-10deg) scale(1);
  }

  46% {
    transform: translate(0, -6px) rotate(-10deg) scale(.96);
  }

  58% {
    transform: translate(0, -6px) rotate(-10deg) scale(1);
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translate(26px, 18px) rotate(-10deg) scale(1);
  }
}

@keyframes phoneTap {

  0%,
  35% {
    transform: none;
  }

  45% {
    transform: scale(.95);
  }

  55% {
    transform: scale(1.06);
  }

  65% {
    transform: scale(1);
  }

  100% {
    transform: none;
  }
}

/* =========================================================
   ACESSIBILIDADE EXTRA
   ========================================================= */
#list-select-wrap {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   FRAME ÚNICO (RESOLVE S8+ E CIA)
   ========================================================= */

/* Variáveis do “quadro” e padding lateral */
:root {
  --gutter: 16px;
  /* recuo lateral dos cards */
  --frame-portrait-desktop: 430px;
  /* largura fixa em desktop/laptop (mouse) */
  --frame-landscape-mobile: 640px;
  /* largura ideal no celular em paisagem */
}

/* Todos os wrappers usam o mesmo padding lateral */
header,
nav,
.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Abas nunca quebram */
nav button {
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ----- Desktop/Laptop (com mouse): 430px centralizado ----- */
@media (min-width:431px) and (hover:hover) and (pointer:fine) {

  body,
  header,
  nav,
  .container {
    max-width: var(--frame-portrait-desktop) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #footer-alert {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--frame-portrait-desktop) !important;
  }
}

/* ----- Celular em paisagem até 740px (inclui Galaxy S8+) ----- */
@media (orientation:landscape) and (max-width:740px) and (hover:none) {

  /* header/nav ocupam toda a viewport */
  header,
  nav {
    max-width: none;
    width: 100vw;
    margin: 0;
    padding-left: calc((100vw - var(--frame-landscape-mobile))/2 + var(--gutter));
    padding-right: calc((100vw - var(--frame-landscape-mobile))/2 + var(--gutter));
    box-sizing: border-box;
  }

  /* área de cards centralizada a 640px */
  .container {
    max-width: var(--frame-landscape-mobile);
    margin: 0 auto;
  }

  /* 3 colunas */
  #categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .8rem !important;
  }

  .items-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr)) !important;
    gap: .8rem !important;
  }

  /* abas confortáveis */
  nav button {
    font-size: 1rem;
    padding: .6rem .5rem;
  }

  nav button.active {
    border-bottom-width: 2px;
  }

  /* alinhamento garantido da logo e pílulas */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    /* já corrigido aqui também */
  }

  #app-title {
    margin-right: auto;
    display: flex;
    align-items: center;
  }

  .header-actions {
    margin-left: auto;
    display: flex;
    gap: .5rem;
  }

  /* botão/alert centralizados no frame */
  #add-to-list-btn {
    left: 50%;
    transform: translateX(-50%);
  }

  #footer-alert {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--frame-landscape-mobile) !important;
  }
}

/* 1) Remover o foco nativo (anel do sistema) */
input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  outline: none !important;
  /* mata o outline nativo */
  box-shadow: none !important;
  /* mata o anel nativo do Safari/macOS */
}

/* 2) Definir seu foco (apenas azul) */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border: 1.5px solid #015FCC !important;
  /* azul na borda */
}

/* [+] melhoria: foco visível padrão para elementos clicáveis (sem mexer no seu foco azul dos inputs) */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="dialog"]:focus-visible {
  /* [+] */
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
}

/* =========================
   DESATIVAR ONBOARDING ANTIGO (.ob)
   ========================= */
#onboarding.ob {
  display: none !important;
  visibility: hidden !important;
}

/* ───────── Wizard (overlay novo) ───────── */
#wizard {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  /* .show liga */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 24px;

  /* VARIÁVEIS RESPONSIVAS (vencem o JS) */
  --wiz-img-width: clamp(360px, 70vmin, 560px) !important;
}

@media (orientation: landscape) and (max-height: 420px) {
  #wizard {
    --wiz-img-width: clamp(320px, 68vmin, 480px) !important;
  }
}

@media (orientation:landscape) and (max-height: 420px) {
  #wizard {
    --wiz-fig-size: clamp(200px, 48vmin, 310px) !important;
    --wiz-img-width: clamp(360px, 56vmin, 500px) !important;
  }
}

/* importante: sem teto no landscape */
@media (orientation: landscape) {
  #wizard .wiz-figure {
    max-width: 100%;
  }
}

#wizard.show {
  display: flex;
}

.wiz-card {
  position: relative;
  width: min(92vw, 540px);
  max-height: 92svh;
  overflow: auto;
  background: #EBEBEB;
  color: #111827;
  /* texto explicativo */
  border-radius: 22px;
  box-shadow: 0 0px 0px;
  padding: clamp(20px, 4svh, 40px) 18px clamp(10px, 3svh, 16px);
}

/* “Pular” no topo (ghost) */
.wiz-skip {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: #333946;
  /* texto pular intro */
  font-weight: 500;
  padding: 12px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
}

/* Palco com bloco 272x272 + imagem 234x135 */
.wiz-stage {
  display: grid;
  justify-items: center;
  align-items: start;
  gap: 6px;
  margin-top: 0px;
}

.wiz-figure {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 1;
  height: var(--wiz-fig-size);
  margin: 0px auto 4px;
  border-radius: 22px;
  background: transparent !important;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* IMAGEM: pode ser <img> ou <div> */
#wizard img.wiz-img,
#wizard .wiz-img {
  width: min(var(--wiz-img-width), 100%);
  aspect-ratio: 282 / 215;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  background: transparent;
  /* evita “marca preta” atrás */
}

/* refinos quando for <img> */
#wizard img.wiz-img {
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  filter: none;
}

/* refinos quando for <div class="wiz-img" style="background-image: url(...)"> */
#wizard .wiz-img:not(img) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Textos/dicas */
.wiz-copy {
  width: 100%;
  text-align: left;
}

.wiz-copy h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
}

.wiz-copy ul {
  margin-top: 8px;
  padding-left: 1px;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.35;
}

.wiz-copy li b {
  font-weight: 800;
}

/* Linha inferior: bolinhas + “Próximo” ghost (abaixo das dicas) */
.wiz-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-left: 2px;
  padding-top: 4px;
}

.wiz-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}

.wiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c8cdd3;
  opacity: .85;
  transition: width .2s ease, background-color .2s ease, opacity .2s ease;
}

.wiz-dot.active {
  width: 18px;
  background: #2563eb;
  opacity: 1;
}

/* Botão “Próximo” – bloco limpo (corrigido) */
.wiz-next {
  margin-left: auto;
  margin-right: 14px;
  font-weight: 500;
  font-size: 14px;
  color: #333946;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  display: none;
}

.wiz-next.is-visible {
  display: inline-block;
}

.wiz-next:hover,
.wiz-next:focus {
  background: transparent !important;
  outline: none;
}

.wiz-next:active {
  transform: translateY(1px);
}

/* Ajuste para telas muito estreitas */
@media (max-width: 360px) {
  #wizard {
    --wiz-fig-size: 248px !important;
    --wiz-img-width: 290px !important;
  }
}

/* 1) A figura passa a usar a largura disponível do cartão */
#wizard .wiz-figure {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}

/* 2) A imagem ocupa a largura da figura e mantém proporção */
#wizard .wiz-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 3) Em paisagem (horizontal), sem limite de 560px */
@media (orientation: landscape) {
  #wizard .wiz-figure {
    max-width: 100%;
  }
}

/* ── Modal mais baixo, seguro e responsivo ───────────────── */
.wiz-card {
  max-height: 90svh;
  padding-left: 6px;
  padding-right: 6px;
  overflow: auto;
}

/* ====== PATCH: subir título e bullets (sem mexer no resto) ====== */
#wizard .wiz-figure {
  aspect-ratio: auto !important;
  /* desliga quadrado 1:1 */
  height: auto !important;
  /* altura só conforme a imagem */
  margin: 0 auto 10px !important;
  /* pequena folga */
}

/* Espaço entre a imagem e o título/bullets do wizard */
#wizard .wiz-stage {
  gap: clamp(12px, 2.5vh, 24px) !important;
}

/* Sobe só o título do wizard (corrigido) */
#wizard .wiz-title {
  margin-top: 0 !important;
  /* antes: -px */
  justify-self: start !important;
  text-align: left !important;
}

/* Título acima da imagem, bullets abaixo (apenas CSS) */
#wizard .wiz-stage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "figure"
    "bullets";
}

/* Faz o h4 e a UL virarem itens diretos do grid */
#wizard .wiz-copy {
  display: contents;
}

/* Mapeia cada parte para sua área */
#wizard .wiz-title {
  grid-area: title;
}

#wizard .wiz-figure {
  grid-area: figure;
}

#wizard .wiz-copy ul {
  grid-area: bullets;
}

/* Remove os bullets da lista de dicas do wizard */
#wizard .wiz-copy ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-self: start !important;
  text-align: left !important;
  margin-left: 16px !important;
  margin-bottom: 14px;
}

/* Wizard: rótulo "passo 1" acima das dicas (corrigido) */
#wizard .wiz-copy ul {
  position: relative;
}

#wizard .wiz-copy ul::before {
  content: "Passo 1";
  display: block;
  margin-top: -8px;
  margin-bottom: 4px;
  color: #8b8b8b;
  font-weight: 500;
  font-size: 14px;
}

/* Wizard: pinta os termos destacados em azul */
#wizard .wiz-copy b,
#wizard .wiz-copy strong {
  color: #2563eb !important;
  font-weight: 60;
  font-size: 16px;
}

/* Wizard: imagem alinhada às extremidades dos textos */
#wizard .wiz-stage {
  justify-items: stretch !important;
}

#wizard .wiz-figure {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#wizard .wiz-img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Título alinhado na mesma linha do "Pular" */
.wiz-card {
  padding-top: 56px;
}

.wiz-title {
  position: absolute;
  top: 28px;
  left: 20px;
  margin: 0;
  line-height: 1.1;
}

.wiz-skip {
  top: 19px;
  margin-right: -6px;
}

/* Esconder o modal "Como usar o Tickou!" fora do mobile */
@media screen and (min-width: 431px),
screen and (hover:hover) and (pointer:fine) {

  #wizard,
  #wizard.show,
  #wizard * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Dots sempre circulares (sem esticar) */
#wizard .wiz-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  transition: background-color .25s ease, opacity .25s ease !important;
}

/* Dot ativa só muda a cor, não o tamanho */
#wizard .wiz-dot.active {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
}

/* ===== Passo 1 / 2 / 3 automáticos pelo estado das bolinhas ===== */
#wizard:has(.wiz-dots .wiz-dot:nth-child(2).active) .wiz-copy ul::before {
  content: "Passo 2";
}

#wizard:has(.wiz-dots .wiz-dot:nth-child(3).active) .wiz-copy ul::before {
  content: "Passo 3";
}

/* Título invisível por padrão */
#lists-group .lists-title {
  display: none;
  margin-top: 20px;
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 500;
  color: #333946;
}

/* Quando #chip-area tiver itens, exibe o título */
#lists-group:has(#chip-area:not(:empty)) .lists-title {
  display: block;
}

/* ------ EMPTY STATE Produtos ------ */
#products-empty {
  display: none;
  /* escondido por padrão */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  /* centraliza no espaço */
  color: #475569;
  opacity: .9;
}

#products-empty p {
  margin: 0;
  margin-top: 6px;
  font-weight: 400;
  font-size: clamp(14px, 1.0vh, 14px);
  line-height: 1.35;
  max-width: 28ch;
  text-wrap: balance;
}

#products-empty .emo {
  font-size: 24px;
  letter-spacing: 0rem;
}

/* Sem categoria selecionada: mostra aviso e esconde grid */
body:not(:has(#categories-grid .card.selected)) #items-section #products-empty {
  display: flex;
}

body:not(:has(#categories-grid .card.selected)) #items-section .items-grid {
  display: none !important;
}

/* Com categoria selecionada: inverso */
body:has(#categories-grid .card.selected) #items-section #products-empty {
  display: none;
}

body:has(#categories-grid .card.selected) #items-section .items-grid {
  display: grid;
}

/* Título acima dos cards de categorias */
#categories-div .cat-title {
  font-size: 18px;
  font-weight: 500;
  color: #282725;
  margin: -2px 0 18px !important;
}

/* Botão "Excluir todos os produtos" no final da lista */
#active-list-items #clear-all-btn {
  display: block;
  margin: 20px auto 20px;
  background: none;
  border: 0;
  color: #ef4444;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}

#active-list-items #clear-all-btn:hover {
  text-decoration: underline;
}

/* Esconde o botão de tema (claro/escuro) por enquanto */
#theme-toggle {
  display: none !important;
}

/* Botão grande no fim da aba Categorias */
.btn-wide {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  background: #3B82F6;
  color: #fff;
  border: none;
  padding: .8rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease;
  /* [+] melhoria: toque */
  -webkit-tap-highlight-color: transparent;
  /* [+] */
  touch-action: manipulation;
  /* [+] */
}

/* ==== Modal + backdrop ==== */
/* Fileira do título + ícone */
#nc-modal-wrap .nc-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 0px;
  flex-wrap: nowrap;

}

/* mantém boa área de clique, mas visualmente aproxima do texto */
#nc-modal-wrap .nc-title-row .nc-edit-btn {
  padding: 4px;
  /* hit area ≈ 28px */
  margin-right: 42px;
  /* puxa 2px para perto do texto */
  line-height: 1;
}

/* tamanho do ícone relativo ao texto e pequeno ajuste vertical */
#nc-modal-wrap .nc-title-row .nc-edit-btn svg {
  width: 1.30em;
  /* acompanha o tamanho do h3 */
  height: 1.30em;
  display: block;
  transform: translateY(.12em);
  /* alinha ao texto */
}

/* h3 dentro da fileira não empurra o ícone */
#nc-modal-wrap .nc-title-row .nc-h {
  flex: 1 1 auto;
  /* dá largura ao h3 mesmo vazio (placeholder) */
  min-width: 12ch;
  /* evita colapsar a 0 e quebrar letra por letra */
  margin: 0;
  /* não empurra o ícone para baixo */
}

/* placeholder do título: mantém comportamento normal de quebra */
#nc-modal-wrap .nc-title-row .nc-h[contenteditable][data-placeholder]:not([data-has-text="true"])::before {
  white-space: normal;
  /* pode quebrar em palavras, mas nunca vira coluna */
}


/* Botão do lápis */
#nc-modal-wrap .nc-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: #6b7280;
  /* [+] melhoria: toque */
  -webkit-tap-highlight-color: transparent;
  /* [+] */
  touch-action: manipulation;
  /* [+] */
}

#nc-modal-wrap .nc-edit-btn:hover {
  background: #f1f5f9;
}

#nc-modal-wrap .nc-edit-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}

#nc-modal-wrap .nc-edit-btn svg {
  width: 22px;
  height: 22px;
}

#nc-modal-wrap .nc-edit-btn:hover {
  background: #f1f5f9;
}

#nc-modal-wrap .nc-edit-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}

#nc-modal-wrap .nc-h {
  display: inline-block;
  vertical-align: middle;
}

/* mantém lado a lado */
#nc-modal-wrap .nc-edit-btn svg {
  width: 22px;
  height: 22px;
}

#nc-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
}

#nc-modal-wrap.show {
  display: block;
}

#nc-modal-wrap .nc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* [+] melhoria: indicação de clicável */

}

#nc-modal-wrap .nc-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 760px);
  background: #fff;
  color: #111827;
  border-radius: 18px;
  /* box-shadow: 0 18px 45px rgba(0, 0, 0, .22); */
  padding: 32px 26px 22px;
}

#nc-modal-wrap .nc-close {
  position: absolute;
  top: 16px;
  right: 24px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

#nc-modal-wrap .nc-h {
  font-size: clamp(18px, 3.8vw, 36px);
  font-weight: 500;
  margin: 6px 0 18px;
  font-size: 20px;
}

/* Input + contador + X */
.nc-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 18px;
}

#nc-input {
  flex: 1;
  height: 38px;
  padding: .45rem .6rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: .8rem;
  color: #111827;
  background: #fff;
}

#nc-input::placeholder {
  color: #9CA3AF;
}

.nc-count {
  margin-left: .35rem;
  font-size: .8rem;
  color: #6b7280;
  text-align: right;
}

/* Linha e ações */
.nc-sep {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 14px 0 18px;
}

.nc-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.nc-ghost-danger {
  border: 0;
  background: transparent;
  color: #ef4444;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}

/* Título editável com placeholder e foco azul */
#nc-modal-wrap .nc-h[contenteditable] {
  outline: none;
  border-radius: 0px;
  padding: 0px 0px;
}

#nc-modal-wrap .nc-h.is-editing {
  /* espaço para estilo de edição */
}

#nc-modal-wrap .nc-h[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
}

#nc-title[contenteditable] {
  direction: ltr;
  /* sempre esquerda → direita */
  unicode-bidi: isolate;
  /* isola a direção do resto da página */
  text-align: left;
}

#nc-title[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
}

/* título editável sempre da esquerda p/ direita */
#nc-title[contenteditable] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  outline: none;
}

/* placeholder visível quando NÃO houver texto real */
#nc-title[contenteditable][data-placeholder]:not([data-has-text="true"])::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  /* cinza clarinho como no mock */
  pointer-events: none;
  display: block;
}

/* garante altura para o preview “grande” */
#nc-title.nc-h {
  display: inline;
  /* mantém fluxo natural do texto */
  position: relative;
}

/* ——— Lápis colado ao título (sem mexer no HTML/JS) ——— */

/* se existir um botão antigo do lápis, some com ele */
#nc-modal-wrap .nc-edit-btn {
  display: none !important;
}

/* o lápis passa a ser desenhado no próprio h3 */
#nc-title.nc-h {
  display: inline;
  /* mantém fluxo natural do texto */
  position: relative;
}

/* ícone de lápis inline, responsivo ao tamanho do título */
#nc-title.nc-h::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  /* acompanha o font-size do h3 */
  height: 0.95em;
  margin-left: 12.20em;
  /* distância do texto */
  vertical-align: -.12em;
  /* alinha ao baseline do texto */
  background: currentColor;
  /* herda a cor do título */

  /* usa a forma do lápis como máscara (fica com a cor do texto) */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.03 0-1.42l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.82z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.03 0-1.42l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.82z"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* se quiser ainda mais colado, reduza o espaçamento: */
/* #nc-title.nc-h::after { margin-left: .18em; } */


/* Título editável do modal: baseline correta + placeholder sobreposto */
#nc-title.nc-h[contenteditable] {
  position: relative;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  line-height: 1.1;
  /* ajuste fino do baseline */
  min-height: 1.6em;
  /* garante altura clicável */
}

/* Mostra o placeholder sem ocupar espaço (não empurra o cursor) */
#nc-title[contenteditable][data-placeholder]:not([data-has-text="true"])::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #9CA3AF;
  pointer-events: none;
  user-select: none;
}

/* Link azul central " + Novo produto " */
#nc-modal-wrap .nc-plus {
  background: transparent;
  border: 0;
  color: #2563eb;
  font-weight: 500;
  font-size: 16px;
  display: block;
  margin: 8px auto 10px;
  padding: 10px 0 4px;
  cursor: pointer;
}

#nc-modal-wrap .nc-plus:hover {
  text-decoration: underline;
}

/* === Modal: todos os inputs de produto com o MESMO visual do primeiro === */
#nc-modal-wrap .nc-input-row input[type="text"] {
  flex: 1;
  height: 38px;
  /* igual ao #nc-input */
  padding: .45rem .6rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: .8rem;
  color: #111827;
  background: #fff;
}

#nc-modal-wrap .nc-input-row input[type="text"]::placeholder {
  color: #9CA3AF;
}

/* foco azul (se quiser garantir aqui também) */
#nc-modal-wrap .nc-input-row input[type="text"]:focus {
  outline: none;
  border: 1.5px solid #015FCC;
}

/* ===== Modal: lista de produtos com SCROLL após 4 itens ===== */
#nc-modal-wrap .nc-modal {
  --nc-row-h: 44px;
  /* altura aproximada de cada linha */
  --nc-gap: 12px;
  /* espaço entre linhas */
}

/* container das linhas (o que abriga as .nc-input-row) */
#nc-products {
  display: grid;
  gap: var(--nc-gap);
}

/* usamos o gap do grid (remove margens da regra antiga) */
#nc-products .nc-input-row {
  margin: 0;
  height: var(--nc-row-h);
  min-height: var(--nc-row-h);
}



/* === MODAL: estrutura e rolagem confiável === */
#nc-modal-wrap.show {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .4);
}

#nc-modal-wrap .nc-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(92vw, 420px);
  max-height: min(85vh, 640px);
  overflow: hidden;
  /* o cartão não rola */
  min-height: 0;
  --nc-gap: 6px;
  /* era 12px — controla o espaço entre as linhas */
  --nc-row-h: 46px;
  /* era ~56/44 — altura total de cada linha */
}

#nc-products {
  /* a lista é quem rola */
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;

  /* grid bonitinho (se já existir, tudo bem) */
  display: grid;
  row-gap: var(--nc-gap, 12px);
  padding-right: 2px;

  /* limite “de segurança”; o JS ajusta depois */
  max-height: calc(4 * var(--nc-row-h, 56px) + 3 * var(--nc-gap, 12px));
}

#nc-products .nc-input-row {
  height: var(--nc-row-h, 56px);
  min-height: var(--nc-row-h, 56px);
}

/* Em último caso, garante que ancestrais não bloqueiem o encolhimento */
#nc-modal-wrap,
#nc-modal-wrap * {
  min-height: 0;
}

/* === PATCH FINAL — lápis responsivo, colado ao texto e que some ao digitar === */

/* 1) Se havia lápis via ::after no título, desativa */
#nc-title.nc-h::after {
  content: none !important;
}

/* 2) Linha do título: flex, baseline e espaço reservado pro “X” */
#nc-modal-wrap .nc-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 0px;
  /* reserva pro botão de fechar */
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

/* 3) Ordem: lápis ANTES do texto (como no mock) */
#nc-modal-wrap .nc-title-row .nc-edit-btn {
  order: 0;
}

#nc-modal-wrap .nc-title-row #nc-title {
  order: 1;
}

/* 4) Reexibe o botão do lápis (pode ter sido ocultado por regras antigas) */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  display: inline-flex !important;
  /* garante que aparece */
  flex: 0 0 28px;
  /* largura fixa p/ ficar “fixo no lugar” */
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-right: 22px;
}

/* 5) Título cresce até encostar no lápis e para antes do “X” */
#nc-modal-wrap .nc-title-row #nc-title {
  order: 0;
  /* texto primeiro */
  flex: 1;
  flex: 1;
  min-width: 6ch;
  max-width: 100%;
  line-height: 1.1;
}

/* 6) Lápis some quando o usuário digitar (ou focar o título) */
#nc-modal-wrap .nc-title-row:has(#nc-title[data-has-text="true"]) .nc-edit-btn,
#nc-modal-wrap .nc-title-row:has(#nc-title:focus) .nc-edit-btn {
  display: none !important;
}

/* 7) Ícone acompanha o tamanho do texto e alinha no baseline */
#nc-modal-wrap .nc-title-row .nc-edit-btn svg {
  width: 1.15em;
  height: 1.15em;
  transform: translateY(.06em);
}

/* Lápis visível à direita no primeiro estado */
#nc-modal-wrap .nc-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#nc-modal-wrap .nc-title-row .nc-edit-btn {
  display: inline-flex !important;
  /* garante visível ao abrir */
  margin-left: 0px;
  padding: 0px;
  line-height: 1;
}

/* Desativa qualquer pseudo-lápis antigo */
#nc-title.nc-h::after {
  content: none !important;
}

/* === PATCH — Lápis no 1º estado, à direita e some ao editar === */

/* 0) Desliga a versão antiga desenhada via ::after */
#nc-title.nc-h::after {
  content: none !important;
}

/* 1) Fileira do título: alinhamento fino */
#nc-modal-wrap .nc-title-row {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  /* aproxima levemente o lápis do texto */
}

/* 2) Mostra o botão do lápis (estava oculto) e o posiciona à direita do texto */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  display: inline-flex !important;
  /* garante que apareça no 1º estado */
  padding: 4px;
  /* boa área de clique */
  margin-left: .25rem;
  /* coladinho ao h3 */
  line-height: 1;
  color: #111827;
}

/* tamanho do SVG relativo ao tamanho do h3 + pequeno ajuste vertical */
#nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
  width: 1.05em;
  height: 1.05em;
  transform: translateY(.08em);
}

/* 3) Ao focar ou digitar no título, o lápis some */
#nc-modal-wrap .nc-title-row:focus-within>.nc-edit-btn,
#nc-title[data-has-text="true"]~.nc-edit-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}


/* ======== FINAL OVERRIDES — LÁPIS (1º estado visível à direita; esconde ao focar/digitar) ======== */
#nc-title.nc-h::after {
  content: none !important;
}

#nc-modal-wrap .nc-title-row {
  display: flex !important;
  align-items: baseline !important;
  gap: .35rem !important;
  padding-right: 48px !important;
}

#nc-modal-wrap .nc-title-row>#nc-title {
  order: 0 !important;
  flex: 1 auto !important;
  min-width: 6ch !important;
  max-width: 100% !important;
  line-height: 1.1 !important;
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  order: 1 !important;
  /* garante à direita do texto */
  display: inline-flex !important;
  /* aparece no 1º estado */
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  margin-left: .25rem !important;
  color: #111827 !important;
  transition: opacity .15s ease !important;
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
  width: 1.05em !important;
  height: 1.05em !important;
  transform: translateY(.08em) !important;
}

#nc-modal-wrap .nc-title-row:focus-within>.nc-edit-btn,
#nc-modal-wrap .nc-title-row:has(#nc-title[data-has-text="true"])>.nc-edit-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

}

/* Fallback: caso o botão esteja vazio, desenha o lápis via máscara */
#nc-modal-wrap .nc-title-row>.nc-edit-btn:empty {
  width: 1.05em !important;
  height: 1.05em !important;
  background: currentColor !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.03 0-1.42l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.82z"/></svg>') !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.03 0-1.42l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.82z"/></svg>') !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  mask-position: center !important;
}

/* === FIX: lápis visível no 1º estado, à direita, e some ao editar === */

/* desliga qualquer lápis desenhado via ::after (se existir) */
#nc-title.nc-h::after {
  content: none !important;
}

/* fileira do título: baseline e pequeno gap */
#nc-modal-wrap .nc-title-row {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding-right: 44px;
  /* reserva pro botão X que você já tem */
  flex-wrap: nowrap;
}

/* mostra o botão do lápis no 1º estado (pode ter sido ocultado antes) */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  display: inline-flex !important;
  padding: 4px;
  /* boa área de clique */
  margin-left: .25rem;
  /* coladinho ao h3 */
  line-height: 1;
  align-items: center;
  justify-content: center;
}

/* tamanho do ícone relativo ao h3 + leve ajuste vertical */
#nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
  width: 1.05em;
  height: 1.05em;
  transform: translateY(.08em);
}

/* lápis some quando o título está focado OU já tem texto real */
#nc-modal-wrap .nc-title-row:has(#nc-title:focus)>.nc-edit-btn,
#nc-modal-wrap .nc-title-row:has(#nc-title[data-has-text="true"])>.nc-edit-btn {
  display: none !important;
}

/* ===== FIX FINAL — impedir quebra do título e manter lápis alinhado ===== */
#nc-modal-wrap .nc-title-row {
  flex-wrap: nowrap !important;
}

#nc-modal-wrap .nc-title-row #nc-title {
  display: block !important;
  min-width: 0 !important;
  /* permite encolher */
  white-space: nowrap !important;
  /* não quebra */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  /* reticências */
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  font-size: 20px;
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  flex: 0 0 auto !important;
  /* não encolhe/não quebra */
}

/* === OFF: desabilita a tela de passo a passo (wizard) === */
#wizard,
#wizard.show,
#wizard * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* —— TÍTULO: mostrar tudo (sem ellipsis) e ajustar tamanho automaticamente —— */
#nc-modal-wrap .nc-title-row>#nc-title {
  white-space: nowrap !important;
  /* não quebra */
  overflow: visible !important;
  /* deixa aparecer tudo */
  text-overflow: clip !important;
  /* remove as reticências */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  /* fonte fluida: encolhe o suficiente para caber em celulares estreitos */
  font-size: clamp(16px, 4.8vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  /* leve compactação */
}

/* dá um pouco mais de espaço entre o texto e o lápis */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  margin-left: .5rem !important;
  flex: 0 0 auto !important;
}

/* celulares bem estreitos */
@media (max-width: 380px) {
  #nc-modal-wrap .nc-title-row>#nc-title {
    font-size: clamp(15px, 5.6vw, 26px) !important;
    letter-spacing: -0.01em !important;
  }

  #nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
    width: .95em !important;
    height: .95em !important;
  }
}

/* garante que o placeholder do 1º estado também não quebre (sem “…”) */
#nc-modal-wrap .nc-title-row #nc-title[contenteditable][data-placeholder]:not([data-has-text="true"])::before {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}


/* espaço reservado para o lápis (sem quebrar o layout) */
#nc-modal-wrap .nc-title-row>#nc-title {
  padding-right: 40px !important;
  /* ajuste fino se precisar (+/−) */
  line-height: 1.1 !important;
}

/* lápis fora do fluxo, alinhado ao texto e com hit area grande */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  position: absolute !important;
  right: 32px !important;
  /* empurra mais pra frente se quiser */
  top: 30% !important;
  transform: translateY(-45%) !important;
  /* leve correção visual */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
  /* hit area grande, sem afetar a linha */
  line-height: 1 !important;
  height: 2.8em !important;
  /* ícone segue o tamanho do texto */
  width: 2.8em !important;
}

/* tamanho do SVG do lápis atrelado ao texto */
#nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
  width: 1.3em !important;
  height: 1.3em !important;
}


/* --- FIX: lápis não desce ao clicar --- */
#nc-modal-wrap .nc-title-row {
  align-items: center !important;
  /* centraliza verticalmente (evita baseline variar ao focar) */
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  align-self: center !important;
  transform: none !important;
  top: -10px !important;
  margin-right: 20px !important;
  /* garante que nada mude ao tocar */
  line-height: 1 !important;
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn:hover,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:focus,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:focus-visible,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:active {
  background: transparent !important;
  /* sem efeito visual */
  box-shadow: none !important;
  transform: none !important;
}

#nc-modal-wrap .nc-title-row>.nc-edit-btn svg {
  transform: none !important;
  /* impede deslocamento do SVG */
}

/* opcional: remove o flash azul no mobile */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  -webkit-tap-highlight-color: transparent;
}

/* "+ Novo produto" alinhado à esquerda */
#nc-modal-wrap .nc-plus {
  /* estava centralizado por causa do margin: auto */
  margin: 8px 0 10px 0 !important;
  text-align: left !important;
  /* opcional: manter como block ou inline-block, ambos funcionam */
  display: block !important;
}

/* "×" ao lado do título (sem efeito/hover discreto) */
#nc-modal-wrap .nc-title-row .nc-title-clear {
  visibility: hidden;
  /* ocupa espaço p/ não “pular” */
  opacity: 0;
  pointer-events: none;

  margin-left: .35rem;
  padding: 0;
  width: 1.25em;
  height: 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  color: #9CA3AF;
  /* cinza claro */
  font-size: 1.45em;
  /* acompanha o h3 */
  line-height: 1;
  cursor: pointer;
  transform: translateY(.02em);
  /* alinha ao baseline */
}

#nc-modal-wrap .nc-title-row .nc-title-clear:hover {
  color: #6b7280;
}

#nc-modal-wrap .nc-title-row .nc-title-clear:focus {
  outline: none;
}

/* Aparece quando há texto (compatível: via classe OU atributo) */
#nc-modal-wrap .nc-title-row.has-text .nc-title-clear,
#nc-modal-wrap .nc-title-row:has(#nc-title[data-has-text="true"]) .nc-title-clear {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* === LÁPIS ESTÁVEL: não mexe ao passar o mouse/clicar === */
#nc-modal-wrap .nc-title-row {
  position: relative !important;
  align-items: center !important;
}

/* reserva espaço p/ o lápis, responsivo */
#nc-modal-wrap .nc-title-row>#nc-title {
  padding-right: clamp(32px, 7vw, 56px) !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* lápis absoluto, centralizado na linha, sem efeitos */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  /* centra sem usar transform */
  margin: auto 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: none !important;
}

/* neutraliza qualquer efeito que tenha ficado em :hover/:active/:focus */
#nc-modal-wrap .nc-title-row>.nc-edit-btn:hover,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:active,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:focus,
#nc-modal-wrap .nc-title-row>.nc-edit-btn:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
}

/* garante tamanho consistente do ícone (SVG ou Material Symbols) */
#nc-modal-wrap .nc-title-row>.nc-edit-btn svg,
#nc-modal-wrap .nc-title-row>.nc-edit-btn .material-symbols-outlined {
  width: clamp(22px, 5.6vw, 28px) !important;
  height: clamp(22px, 5.6vw, 28px) !important;
  font-size: clamp(22px, 5.6vw, 28px) !important;
  transform: none !important;
  transition: none !important;
  margin-left: 12px;
  margin-top: -6px;
}

/* caso exista alguma regra antiga escondendo o lápis ao focar o título, cancela */
#nc-modal-wrap .nc-title-row:focus-within>.nc-edit-btn {
  display: inline-grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* === "x" cinza alinhado à direita do título ==================== */
/* vale para .nc-title-clear ou #nc-title-clear, independente do tipo */
#nc-modal-wrap .nc-title-row {
  position: relative !important;
}

/* Título (contenteditable) em 1 linha – sem quebra */
#nc-modal-wrap .nc-title-row #nc-title {
  display: block !important;
  white-space: nowrap !important;
  /* não quebra */
  overflow: hidden !important;
  /* esconde excesso */
  text-overflow: clip !important;
  /* reticências se passar */
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  font-size: clamp(21px, 6vw, 44px) !important;
  /* ajuste os valores se quiser */
  line-height: 1.12 !important;
}


/* botão/ícone do X fixo na direita, centralizado verticalmente */
#nc-modal-wrap .nc-title-row>.nc-title-clear,
#nc-modal-wrap .nc-title-row>#nc-title-clear {
  position: absolute !important;
  right: 8px !important;
  top: 38% !important;
  transform: translateY(-50%) !important;
  display: inline-grid !important;
  place-items: center !important;
  width: clamp(20px, 5vw, 24px) !important;
  height: clamp(20px, 5vw, 24px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9CA3AF !important;
  /* cinza */
  line-height: 1 !important;
  cursor: pointer !important;
  transition: none !important;
  /* sem efeito */
  z-index: 1;
  margin-right: -3px;
}

#nc-modal-wrap .nc-title-row>.nc-title-clear:hover,
#nc-modal-wrap .nc-title-row>#nc-title-clear:hover {
  /* color: #6b7280 !important; */
  /* leve escurecida no hover (opcional) */
}

/* se for SVG dentro do botão, garante o tamanho */
#nc-modal-wrap .nc-title-row>.nc-title-clear svg,
#nc-modal-wrap .nc-title-row>#nc-title-clear svg {
  width: 100% !important;
  height: 100% !important;

}

/* Título sem quebra e sem reticências */
#nc-modal-wrap .nc-title-row #nc-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  /* em vez de ellipsis */
}


/* "+ Novo produto" — clique só no texto */
#nc-modal-wrap .nc-plus {
  align-self: flex-start !important;
  /* não estica no flex container */
  display: inline-flex !important;
  /* encolhe ao conteúdo */
  padding: 0 !important;
  /* sem área extra clicável */
  margin: 16px 0 10px !important;
  /* mantém o espaçamento vertical */
  line-height: 1.1 !important;
  width: auto !important;
}

/* Lápis: espaçamento e cor (override leve) */
#nc-modal-wrap .nc-title-row>.nc-edit-btn {
  margin-left: .6rem !important;
  /* empurra um pouco mais */
  color: #818A98 !important;
  /* cor do ícone */
  top: 0 !important;
}

/* Garante que o SVG herda a cor escolhida */
#nc-modal-wrap .nc-title-row>.nc-edit-btn svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
  /* funciona p/ outlined */
}

/* Botão "Fechar" no topo-direito do modal */
#nc-modal-wrap .nc-close {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px 8px !important;
  /* só a área do texto */
  color: #6b7280 !important;
  /* cinza */
  font-weight: 500 !important;
  font-size: clamp(12px, 2.2vw, 22px) !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#nc-modal-wrap .nc-close:hover {
  /* color: #4b5563 !important; */
}

#nc-modal-wrap .nc-close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
  border-radius: 8px !important;
}

/* === Fechar: fixo no topo-direito, dentro do modal === */
#nc-modal-wrap .nc-modal {
  /* garante área de respiro no topo para o botão */
  padding-top: max(44px, 3.2rem) !important;
  /* ajuste fino se quiser */
  position: absolute;
  /* já é, mas reforça o contexto do absoluto filho */
}

/* posiciona o botão mais “alto”, dentro dos limites do cartão */
#nc-modal-wrap .nc-close {
  top: clamp(8px, 1.4vh, 14px) !important;
  /* sobe sem sair do cartão */
  right: clamp(14px, 2vw, 22px) !important;
  /* encosta no canto com respiro */
  background: transparent !important;
  border: 0 !important;
  padding: 4px 6px !important;
  line-height: 1 !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: clamp(14px, 2.2vw, 22px) !important;
  cursor: pointer !important;
}

#nc-modal-wrap .nc-close:hover {
  color: #4b5563 !important;
}

#nc-modal-wrap .nc-close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
  border-radius: 8px !important;
}


/* ===== 5 linhas visíveis no preview de produtos ===== */
/* Altura de uma linha e espaçamento já são lidos das vars abaixo */
#nc-modal-wrap .nc-modal {
  --nc-row-h: 56px;
  /* ajuste se sua linha tiver outra altura */
  --nc-gap: 0px;
  /* ajuste se o espaço entre linhas mudar */
}

/* Até 5 linhas cabem sem rolar */
#nc-products {
  max-height: calc(5 * var(--nc-row-h) + 4 * var(--nc-gap)) !important;
}

/* Quando houver 6+ linhas, ativa a rolagem (e mantém) */
#nc-products:has(.nc-input-row:nth-child(6)) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* "+ Novo produto": sem sublinhado no hover/focus/active */
#nc-modal-wrap .nc-plus,
#nc-modal-wrap .nc-plus:hover,
#nc-modal-wrap .nc-plus:focus,
#nc-modal-wrap .nc-plus:active {
  text-decoration: none !important;
}

/* Opcional: remove qualquer outline/box-shadow de foco */
#nc-modal-wrap .nc-plus:focus,
#nc-modal-wrap .nc-plus:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Espaço inferior no grid de categorias para o botão fixo "+ Nova categoria" */
#categories-div:has(.btn-wide) {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

/* ===== Scrollbar do #nc-products — largura e estilo ===== */
#nc-products {
  /* Firefox */
  scrollbar-width: thin;
  /* "auto" | "thin" */
  scrollbar-color: var(--sb-thumb, #cfd6df) var(--sb-track, #eef2f6);
  /* Reserva espaço p/ a barra não “pular” layout */
  scrollbar-gutter: stable;
}

/* WebKit (Chrome/Edge/Safari) */
#nc-products::-webkit-scrollbar {
  width: var(--sb-w, 8px);
  /* ← mude aqui: 4, 6, 8, 10... */
}

#nc-products::-webkit-scrollbar-track {
  background: var(--sb-track, #eef2f6);
  border-radius: 999px;
}

#nc-products::-webkit-scrollbar-thumb {
  background: var(--sb-thumb, #9aa3af);
  border-radius: 999px;

  /* “afina” visualmente o polegar e evita a linha fina no meio */
  border: 1px solid var(--sb-track, #eef2f6);
  box-shadow: none;
}

#nc-products:hover::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-hover, #7b818d);
}

/* Opcional: versão super fina (adicione a classe quando quiser) */
#nc-products.sb-thin::-webkit-scrollbar {
  width: 4px;
}

#nc-products.sb-thin {
  scrollbar-width: thin;
}

/* [+] melhoria: placeholders ligeiramente mais legíveis (sem alterar cor) */
::placeholder {
  /* [+] */
  opacity: 0.85;
}

/* Empty-states: Produtos + Listas (estilo idêntico) */
#products-empty,
#lists-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  /* espaço entre emojis e texto */
  padding: 24px 16px;
  /* ocupa a área útil do painel para parecer centralizado */
  min-height: 42vh;
  color: var(--empty-fg, var(--muted-ink, #778396));
  margin-top: 20px;
}

#products-empty .emo,
#lists-empty .emo {
  font-size: clamp(18px, 5vw, 44px);
  /* mesmo tamanho dos emojis do Produtos */
  line-height: 1;
  white-space: nowrap;
  /* mantém os 4 emojis na mesma linha */
  word-spacing: 0.1em;
  /* leve respiro entre os emojis */
}

#products-empty p,
#lists-empty p {
  margin: 0;
  max-width: 200px;
  /* força a quebra em duas linhas, como no print */
  font-weight: 500;
  /* mesmo “semibold” do Produtos */
  font-size: clamp(14px, 3.8vw, 22px);
  line-height: 1.4;
  color: inherit;
}

/* Opcional: quando a área for muito baixa, reduz um pouco para não “apertar” */
@media (max-height: 620px) {

  #products-empty,
  #lists-empty {
    min-height: 32vh;
  }
}

/* PATCH PEQUENO CSS” */
/* ───────────────── TOKENS UNIFICADOS ───────────────── */
:root {
  --icon-size: 24px;
  /* tamanho do ícone (X, lápis, etc.) */
  --hit-size: 44px;
  /* área mínima clicável/touch */
  --row-h: 46px;
  /* altura de cada linha de produto no modal */
  --row-gap: 8px;
  /* espaço entre linhas */
  --sb-w: 8px;
  /* largura da scrollbar nos WebKit */
  --sb-track: #eef2f6;
  /* cor da pista da scrollbar */
  --sb-thumb: #9aa3af;
  /* cor do polegar da scrollbar */
  --sb-thumb-hover: #7b818d;
}

/* ───────────────── MODAL COMPAT iOS/Android ───────────────── */
/* Cartão do modal não rola; a lista interna (#nc-products) é quem rola */
#nc-modal-wrap.show {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .4);
}

#nc-modal-wrap .nc-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(92vw, 420px);
  max-height: min(85svh, 640px);
  overflow: hidden;
  /* o cartão em si não rola */
  min-height: 0;
  /* permite filhos encolherem no iOS */
}

/* Lista rolável de produtos (sempre a mesma lógica em qualquer SO) */
#nc-products {
  position: relative;
  /* p/ fade ::after */
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* inércia no iOS */
  overscroll-behavior: contain;
  touch-action: pan-y;

  display: grid;
  row-gap: var(--row-gap);
  padding-right: 2px;

  /* Até 5 linhas cabem sem rolar; com 6+ ativa rolagem */
  max-height: calc(5 * var(--row-h) + 4 * var(--row-gap));
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  /* Firefox */
  scrollbar-gutter: stable;
  /* evita “pulo” */
}

/* Cada linha mantém altura coesa */
#nc-products .nc-input-row {
  height: var(--row-h);
  min-height: var(--row-h);
}

/* WebKit scrollbar (Chrome/Edge/Safari) */
#nc-products::-webkit-scrollbar {
  width: var(--sb-w);
}

#nc-products::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
}

#nc-products::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 1px solid var(--sb-track);
  box-shadow: none;
}

#nc-products:hover::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-hover);
}

/* Gatilho único: rola a partir da 6ª linha (e mostra fade) */
/*#nc-products::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
  opacity: 0; transition: opacity .15s ease;
}
#nc-products:has(.nc-input-row:nth-child(6))::after{ opacity: 1; }

#nc-modal-wrap .nc-close:focus-visible{
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 8px;
} */

/* === BOTÃO LIMPAR (x) — SVG via máscara, tamanho 14px === */
/* mantém o look igual entre iOS e Android */
.nc-clear {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #fa0000;
  /* mesma cor que você já usava */
  width: 36px;
  /* área de toque confortável */
  height: 36px;
  /* (32–44px é o ideal p/ mobile) */
  display: inline-grid;
  place-items: center;
  /* centraliza o ícone */
  padding: 0;
  cursor: pointer;
  line-height: 1;
  /* evita “pular” a linha */
  font-size: 0;
  /* se tiver texto “x”, fica invisível */
  margin-top: 7px;
}

/* ===== Tokens reutilizáveis ===== */
:root {
  /* SVG do “x” como máscara (UMA LINHA) */
  --x-icon-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 0 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E");
  --x-icon-size: 20px;
  /* tamanho padrão */
  --x-icon-color: #ef4444;
  /* cor padrão via currentColor */
}

/* ===== Casca dos botões (reset + tokens) ===== */
.nc-clear,
.item-remove {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 0;
  /* evita qualquer “x” textual */
  color: var(--x-icon-color);
}

/* Tamanhos/hit-area individuais */
.nc-clear {
  --x-icon-size: 20px;
  width: 36px;
  height: 36px;
  margin-top: 7px;
}

.item-remove {
  --icon-size: 20px;
  --hit-size: 36px;
  --x-icon-size: var(--icon-size);
  width: var(--hit-size);
  height: var(--hit-size);
}

/* ===== Ícone (mesmo SVG) ===== */
.nc-clear::before,
.item-remove::before {
  content: "";
  width: var(--x-icon-size);
  height: var(--x-icon-size);
  background: currentColor;
  -webkit-mask: var(--x-icon-mask) no-repeat center / contain;
  mask: var(--x-icon-mask) no-repeat center / contain;
}

.nc-clear::before,
.item-remove::before {
  margin-top: 7px;
}

#create-list-btn {
  height: 45px !important;
  /* ajuste aqui */
  padding: 0 18px;
  /* opcional: mais largura */
  border-radius: 8px;
  /* opcional */
}