:root {
            --bg: #0f172a;
            --card: #111827;
            --ink: #e5e7eb;
            --accent: #22c55e;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #0b1022;
            color: var(--ink);
            font-family: system-ui, Segoe UI, Roboto, Arial;
        }

        header {
            padding: 1rem 1.25rem .6rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        h1 {
            margin: .2rem 0 0;
            font-size: 1.8rem;
            color: #FF8C00;
        }

        main {
            padding: 1rem 1.25rem 2rem;
            display: grid;
            gap: 1rem;
            max-width: 1100px;
            margin: 0 auto;
        }

        .card {
            background: var(--card);
            border: 1px solid rgba(255, 255, 255, .06);
            border-radius: 14px;
            padding: .5rem;
            width: 100%;
        }

        /* === Dicas do Mestre (NotaServico) === */
        .card-dicas .dica-content {
            line-height: 1.6;
            font-size: 0.95rem;
            color: #eaeaea;
            /* texto bem legível no fundo escuro */
        }

        /* título do NotaServico (vem como <h3>) */
        .card-dicas .dica-content h3 {
            margin: 0 0 .5rem 0;
            font-size: 1.125rem;
            color: #fff;
            font-weight: 700;
        }

        /* Listas dentro do NotaServico */
        .card-dicas .dica-content ul {
            padding-left: 1.25rem;
            margin: .5rem 0 1rem;
        }

        .card-dicas .dica-content li {
            margin: .25rem 0;
        }

        /* Imagens do NotaServico (independe se vierem com <img> dentro de <div>) */
        .card-dicas .dica-content img {
            float: right;
            /* desktop: encosta na margem direita */
            margin: 0 0 .75rem 1rem;
            /* espaço à esquerda e abaixo da imagem */
            max-width: 420px;
            /* limita exageros */
            width: clamp(240px, 38vw, 420px);
            /* tamanho fluido no desktop */
            height: auto !important;
            /* ignora height fixo do HTML do banco */
            object-fit: cover;
            border-radius: .5rem;
            /* Se existir largura/altura inline no HTML, estes dois garantem que CSS vença */
            max-height: none !important;
        }

        /* Garante que o contêiner "abrace" o float */
        .card-dicas .dica-content::after {
            content: "";
            display: block;
            clear: both;
        }

        /* Celular: empilha, texto ocupa toda a largura, imagem 100% e por último */
        @media (max-width: 768px) {
            .card-dicas .dica-content img {
                float: none;
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                margin: .75rem 0 0 0;
                /* espaço acima da imagem quando ela vier depois do texto */
                border-radius: .5rem;
            }
        }

        .row {
            display: grid;
            gap: .75rem;
        }

        @media(min-width:860px) {
            .row {
                grid-template-columns: 2fr 1fr 1fr;
            }
        }

        label {
            display: block;
            font-size: .92rem;
            margin: .3rem 0 .2rem;
        }

        select {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 10px;
            background: transparent;
            color: var(--ink);
            padding: .6rem .7rem;
        }

        input {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 10px;
            background: transparent;
            color: var(--ink);
            padding: .6rem .7rem;
        }

        .muted {
            opacity: .85;
        }

        #saida ol {
            margin: 0;
            padding-left: 1.2rem;
        }

        #saida li {
            margin-bottom: 0.4rem;
        }

        .btn {
            display: inline-flex;
            gap: .5rem;
            align-items: flex-end;
            line-height: 1.6;
            border-radius: 12px;
            padding: .5rem 1rem;
            border: 1px solid rgba(218, 13, 13, 1);
            background: linear-gradient(180deg, rgba(233, 94, 2, 0.8), rgba(184, 69, 2, 0.93));
            color: #eafff4;
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: .75rem;
        }

        th {
            padding: .6rem .5rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            text-align: left;
        }

        td {
            padding: .6rem .5rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            text-align: left;
        }

        tfoot td {
            font-weight: 700;
        }

        .tag {
            font-size: .75rem;
            padding: .12rem .45rem;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
        }

        .err {
            color: #ffb4b4;
        }

        .hint {
            font-size: 12px;
            color: #93c5fd;
        }

        pre.debug {
            background: #0b1222;
            border: 1px solid #223;
            padding: .5rem;
            border-radius: 10px;
            overflow: auto;
            color: #cfe;
        }

        #servico {
            background-color: #111827;
            color: #ffffff;
            border-color: #334155;
        }

        /* Cor esmaecida apenas enquanto nenhuma opção válida foi escolhida */
        #servico:invalid {
            color: rgba(229, 231, 235, 0.5);
            /* mesmo tom do placeholder do input */
        }

        #servico:focus {
            outline: 2px solid #22c55e;
            outline-offset: 2px;
        }

        #servico option {
            background-color: #0f172a;
            color: #ffffff;
        }

        /* ===== iOS/Safari: evitar shrink-to-fit e zooms estranhos ===== */
        html {
            -webkit-text-size-adjust: 100%;
        }

        /* Garantir cards a 100% da largura no mobile */
        main {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }

        /* ===== Tabela responsiva ===== */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* rolagem suave no iOS */
        }

        table.tabela-resultados {
            min-width: 720px;
            /* evita “amassar” colunas demais */
            table-layout: fixed;
            word-break: break-word;
            width: 100%;
        }

        td.num,
        th.num {
            text-align: right;
            white-space: nowrap;
        }

        .nowrap {
            white-space: nowrap;
        }

        @media (max-width: 768px) {

            th,
            td {
                padding: .5rem .4rem;
                font-size: clamp(12px, 3.5vw, 14px);
            }
        }

        /* Larguras das colunas (desktop) */
        .tabela-resultados col.w-item {
            width: 40%;
        }

        /* Item: mais larga */
        .tabela-resultados col.w-un {
            width: 12%;
        }

        /* Un.: mais estreita */
        .tabela-resultados col.w-qt {
            width: 12%;
        }

        .tabela-resultados col.w-pu {
            width: 18%;
        }

        .tabela-resultados col.w-sub {
            width: 18%;
        }

        @media (max-width: 768px) {

            /* Ajuste fino no mobile para leitura melhor */
            .tabela-resultados col.w-item {
                width: 38%;
            }

            .tabela-resultados col.w-un {
                width: 13%;
            }

            .tabela-resultados col.w-qt {
                width: 16%;
            }

            .tabela-resultados col.w-pu {
                width: 13%;
            }

            .tabela-resultados col.w-sub {
                width: 20%;
            }
        }

        /* Mantém comportamento responsivo já aplicado */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table.tabela-resultados {
            min-width: 640px;
            table-layout: fixed;
            word-break: break-word;
            width: 100%;
        }

        td.num,
        th.num {
            text-align: right;
            white-space: nowrap;
        }

        .nowrap {
            white-space: nowrap;
        }

        /* === Correções de layout (header/cards/logo) === */
        .header-inner {
            max-width: 1100px;
            margin: 0 auto;
            padding: 1rem 1.25rem .6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-direction: row-reverse;
        }

        .header-inner h1 {
            margin: 0;
            line-height: 1.2;
        }

        .header-logo {
            height: auto;
            max-height: 64px;
            flex: 0 0 auto;
        }

        @media (max-width: 720px) {
          /* NOVO: empilhar como na home */
          .header-inner {
          flex-direction: column;
          align-items: flex-start;
          }
          .header-logo {
            align-self: flex-start;
            max-width: 180px;
          }
      }

        /* === Responsividade do banner de anúncio === */
        .ads-area {
            margin-top: .5rem;
            text-align: center;
            padding: .5rem 0;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }

        .ads-area picture,
        .ads-area img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }

        .ad-banner {
            width: 100%;
            height: auto;
            /* evita corte vertical */
            object-fit: contain;
            /* mantém proporções em containers estreitos */
        }

        /* Evitar corte por altura fixa */
        .ads-area,
        .ads-area * {
            max-height: none !important;
            overflow: visible !important;
        }

        /* Esconde o card Dicas do Mestre até o usuário escolher um serviço */
        #card-dicas {
            display: none;
        }

        #card-dicas.is-visible {
            display: block;
        }

        /* ===== Canonical: Tabela Resultado (larguras e alinhamentos) ===== */
        .tabela-resultados {
            width: 100%;
            table-layout: fixed;
            /* respeita larguras definidas */
        }

        /* Coluna 1 - Item */
        .tabela-resultados th:nth-child(1),
        .tabela-resultados td:nth-child(1) {
            width: 38%;
        }

        /* Coluna 2 - Quantidade */
        .tabela-resultados th:nth-child(2),
        .tabela-resultados td:nth-child(2) {
            width: 13%;
            text-align: right;
        }

        /* Coluna 3 - Unidade */
        .tabela-resultados th:nth-child(3),
        .tabela-resultados td:nth-child(3) {
            width: 16%;
            text-align: right;
            padding-right: 10px;
        }

        /* Coluna 4 - Preço Unitário */
        .tabela-resultados th:nth-child(4),
        .tabela-resultados td:nth-child(4) {
            width: 13%;
            text-align: right;
        }

        /* Coluna 5 - Subtotal */
        .tabela-resultados th:nth-child(5),
        .tabela-resultados td:nth-child(5) {
            width: 20%;
            text-align: right;
        }

        /* Garantia extra para a coluna 'Un.' por classe (se usar class="col-un") */
        .tabela-resultados th.col-un,
        .tabela-resultados td.col-un {
            text-align: right;
            padding-right: 10px;
        }

        /* Destaque sutil: só cor e peso do texto nas linhas de soma */
        .tabela-resultados tr.soma-parcial td {
            color: #FFE4B5 !important;
            font-weight: 600;
            /* semi-bold */
        }

        .tabela-resultados tr.soma-total td {
            color: #FF8C00 !important;
            font-weight: 700;
            /* bold */
        }

        /* Mobile: empilhar e centralizar a imagem no final */
        @media (max-width: 768px) {

            /* empilha os filhos para podermos controlar a ordem */
            #card-dicas .dica-content {
                display: flex;
                flex-direction: column;
            }

            /* imagem SEMPRE no final, centralizada e sem estouro de largura */
            #card-dicas .dica-content img {
                order: 2;
                /* garante que fique depois do texto */
                float: none;
                display: block;
                width: 100% !important;
                /* ocupa toda a largura disponível */
                max-width: 100% !important;
                height: auto !important;
                margin: .75rem auto 0 auto;
                /* centralizada (auto nas laterais) */
                border-radius: .5rem;
                box-sizing: border-box;
            }

            /* se a imagem vier embrulhada em uma <div> sozinha, trate o wrapper também */
            #card-dicas .dica-content>div:is(:not([class])):has(> img) {
                order: 2;
                width: 100%;
                margin: .75rem 0 0 0;
            }

            /* todos os demais elementos (texto) ficam antes da imagem */
            #card-dicas .dica-content>*:not(img):not(div:has(> img)) {
                order: 1;
            }
        }

        /* === Correções finais para o MOBILE (≤768px) no card Dicas do Mestre === */
        @media (max-width: 768px) {

            /* Garante que nada “escape” pelas laterais */
            #card-dicas,
            #card-dicas .card-body,
            #card-dicas .dica-content {
                overflow: hidden;
            }

            /* Texto volta a alinhar à esquerda no mobile */
            #card-dicas .dica-content,
            #card-dicas .dica-content p,
            #card-dicas .dica-content ul,
            #card-dicas .dica-content li {
                text-align: left !important;
            }

            /* Zera qualquer float herdado e centraliza a imagem de verdade */
            #card-dicas .dica-content img {
                float: none !important;
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin: .75rem auto 0 auto !important;
                /* centraliza */
                box-sizing: border-box !important;
                /* respeita padding do card */
            }

            /* Se a imagem vier embrulhada em <div>, garante que o wrapper não force deslocamento */
            #card-dicas .dica-content>div {
                float: none !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                text-align: center !important;
                /* caso o wrapper tente alinhar a imagem */
            }

            /* Mantém a imagem como último elemento no mobile (seu JS já ajuda; isso reforça) */
            #card-dicas .dica-content {
                display: block;
                /* simplifica; evita surpresas de flex antigas */
            }

            /* Caso esteja usando o reorder via JS, este bloco pode ficar assim mesmo. */
        }

/* ===== Ajuda (card Resultado) ===== */

/* Cabeçalho do card: título + botão em linha */
#card-resultado .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

/* Título ocupa a esquerda, botão vai para a direita */
#card-resultado .card-head h2 {
  margin: 0 0 .25rem 0;          /* mantém o h2 um pouquinho mais alto */
  flex: 1 1 auto;
}

/* ===== Novo estilo: botão circular com texto abaixo ===== */
#card-resultado .ajuda-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 0.25rem;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2b6cb0, #021a69);
  color: #fff;
  border: 2px solid #4da3ff;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.3s ease;
  margin-left: auto;
}

#card-resultado .ajuda-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: radial-gradient(circle at 30% 30%, #3b82f6, #021a69);
}

#card-resultado .ajuda-btn__icon {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

#card-resultado .ajuda-btn__label {
  font-size: 0.75rem;
  line-height: 1;
  margin-top: 0.25rem;
  color: #dbeafe;
  font-weight: 500;
}

/* ===== Tooltip personalizado do botão Ajuda ===== */
#card-resultado .ajuda-btn {
  position: relative; /* necessário para o posicionamento do tooltip */
}

/* bolha invisível inicialmente */
#card-resultado .ajuda-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 10%;              /* aparece acima do botão */
  left: -380%;                 /* encosta na borda direita do botão */
  transform: translateX(80);  /* mantém alinhado à direita */
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.2;
  width: max-content;
  max-width: 220px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* seta do tooltip */
#card-resultado .ajuda-btn::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

/* mostra o tooltip ao passar o mouse */
#card-resultado .ajuda-btn:hover::after,
#card-resultado .ajuda-btn:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-10px); /* move o texto levemente à esquerda */
}

/* mobile: desativa o tooltip (sem hover) */
@media (max-width: 768px) {
  #card-resultado .ajuda-btn::after,
  #card-resultado .ajuda-btn::before {
    display: none;
  }
}

/* tooltip padrão (via atributo title) já funciona no hover */

/* versão mobile: só o círculo, sem texto */
@media (max-width: 768px) {
  #card-resultado .ajuda-btn {
    width: 44px;
    height: 44px;
  }
  #card-resultado .ajuda-btn__label {
    display: none;
  }
}