/* ===== RESET E VARIÁVEIS ===== */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     :root {
         --primary-dark: #0a0a0a;
         --secondary-dark: #1a1a1a;
         --accent-blue: #00d4ff;
         --accent-cyan: #00ffff;
         --accent-green: #39ff14;
         --accent-orange: #ff8c00;
         --text-primary: #ffffff;
         --text-secondary: #b0b0b0;
         --text-muted: #888888;
         --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
         --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
         --border-color: rgba(0, 212, 255, 0.1);
         --success-color: #39ff14;
         --warning-color: #ff8c00;
         --error-color: #ff4757;
     }

     html,
     body {
         overflow-x: hidden;
         width: 100%;
         max-width: 100vw;
     }

     body {
         font-family: 'Inter', sans-serif;
         background: var(--primary-dark);
         color: var(--text-primary);
         line-height: 1.6;
         overflow-x: hidden;
         position: relative;
     }

     /* ===== SCROLL PROGRESS ===== */
     .scroll-progress {
         position: fixed;
         top: 0;
         left: 0;
         width: 0%;
         height: 3px;
         background: var(--gradient-primary);
         z-index: 10001;
         transition: width 0.3s ease;
     }

     /* ===== HEADER ===== */
     header {
         position: fixed;
         top: 0;
         width: 100%;
         background: rgba(10, 10, 10, 0.95);
         backdrop-filter: blur(20px);
         z-index: 1000;
         border-bottom: 1px solid var(--border-color);
         transition: all 0.3s ease;
     }

     .header-scrolled {
         background: rgba(10, 10, 10, 0.98);
         box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
     }

     nav {
         max-width: 1400px;
         margin: 0 auto;
         padding: 0 5%;
         height: 80px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .logo {
         height: 60px;
         display: flex;
         align-items: center;
         text-decoration: none;
     }

     .logo-img {
         height: 180px;
         width: auto;
         max-width: 180px;
         object-fit: contain;
     }

     .nav-links {
         display: flex;
         align-items: center;
         gap: 2rem;
         list-style: none;
         margin: 0;
         padding: 0;
     }

     .nav-links>li {
         position: relative;
     }

     .nav-links a {
         color: var(--text-secondary);
         text-decoration: none;
         font-weight: 500;
         font-size: 1rem;
         padding: 0.5rem 0;
         transition: all 0.3s ease;
         position: relative;
     }

     .nav-links a:hover {
         color: var(--accent-cyan);
     }

     .nav-links a::after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0;
         width: 0;
         height: 2px;
         background: var(--gradient-primary);
         transition: width 0.3s ease;
     }

     .nav-links a:hover::after {
         width: 100%;
     }

     /* Dropdown */
     .dropdown {
         position: relative;
     }

     .dropdown-content {
         position: absolute;
         top: 100%;
         left: 0;
         background: rgba(10, 10, 10, 0.98);
         backdrop-filter: blur(20px);
         border: 1px solid var(--border-color);
         border-radius: 10px;
         padding: 1rem 0;
         min-width: 200px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-10px);
         transition: all 0.3s ease;
         z-index: 1001;
     }

     .dropdown:hover .dropdown-content {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .dropdown-content a {
         display: block;
         padding: 0.8rem 1.5rem;
         color: var(--text-secondary);
         font-size: 0.9rem;
     }

     .dropdown-content a::after {
         display: none;
     }

     .dropdown-content a:hover {
         background: rgba(0, 212, 255, 0.1);
         color: var(--accent-cyan);
     }

     .mobile-toggle {
         display: none;
         flex-direction: column;
         cursor: pointer;
         gap: 4px;
         background: none;
         border: none;
         padding: 0.5rem;
         z-index: 1001;
     }

     .mobile-toggle span {
         width: 25px;
         height: 3px;
         background: var(--accent-cyan);
         transition: all 0.3s ease;
         border-radius: 2px;
     }

     /* ===== MAIN CONTAINER ===== */
     .main-container {
         min-height: 100vh;
         padding-top: 80px;
         background: radial-gradient(circle at 50% 20%, rgba(0, 212, 255, 0.03) 0%, transparent 70%);
     }

     /* ===== HERO SECTION ===== */
     .hero-calculator {
         padding: 60px 5% 40px;
         text-align: center;
         background: var(--gradient-dark);
         border-bottom: 1px solid var(--border-color);
     }

     .hero-calculator h1 {
         font-size: clamp(2.2rem, 4vw, 3.2rem);
         font-weight: 800;
         margin-bottom: 1rem;
         background: var(--gradient-primary);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     .hero-calculator p {
         font-size: 1.1rem;
         color: var(--text-secondary);
         margin-bottom: 2rem;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
     }

     .features-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1.5rem;
         max-width: 800px;
         margin: 0 auto;
     }

     .feature-item {
         background: rgba(0, 212, 255, 0.05);
         padding: 1.5rem;
         border-radius: 15px;
         border: 1px solid var(--border-color);
         transition: all 0.3s ease;
     }

     .feature-item:hover {
         transform: translateY(-3px);
         border-color: var(--accent-cyan);
     }

     .feature-icon {
         font-size: 2rem;
         margin-bottom: 0.5rem;
         display: block;
     }

     .feature-item h3 {
         font-size: 1.1rem;
         color: var(--accent-cyan);
         margin-bottom: 0.5rem;
     }

     .feature-item p {
         font-size: 0.9rem;
         color: var(--text-secondary);
     }

     /* ===== CALCULATOR FORM ===== */
     .calculator-section {
         padding: 60px 5%;
         max-width: 1400px;
         margin: 0 auto;
     }

     .form-section {
         background: var(--gradient-dark);
         padding: 2.5rem;
         border-radius: 20px;
         margin-bottom: 2rem;
         border: 1px solid var(--border-color);
         box-shadow: 0 10px 30px rgba(0, 212, 255, 0.05);
     }

     .form-section h2 {
         color: var(--accent-cyan);
         margin-bottom: 1.5rem;
         font-size: 1.6rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .form-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.5rem;
     }

     .form-group {
         display: flex;
         flex-direction: column;
     }

     .form-group label {
         margin-bottom: 0.5rem;
         font-weight: 600;
         color: var(--text-primary);
         font-size: 0.9rem;
     }

     .form-group input,
     .form-group select {
         padding: 0.8rem;
         border: 2px solid var(--border-color);
         border-radius: 10px;
         background: rgba(0, 0, 0, 0.3);
         color: var(--text-primary);
         font-size: 0.9rem;
         transition: all 0.3s ease;
         font-family: 'Inter', sans-serif;
     }

     .form-group input:focus,
     .form-group select:focus {
         outline: none;
         border-color: var(--accent-cyan);
         box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
     }

     .form-group option {
         background: var(--secondary-dark);
         color: var(--text-primary);
     }

     /* ===== NCM SECTION ===== */
     .ncm-section {
         background: var(--gradient-dark);
         padding: 2.5rem;
         border-radius: 20px;
         margin-bottom: 2rem;
         border: 1px solid var(--border-color);
     }

     .ncm-item {
         background: rgba(0, 0, 0, 0.2);
         padding: 2rem;
         border-radius: 15px;
         margin-bottom: 1.5rem;
         border: 1px solid rgba(0, 212, 255, 0.2);
         transition: all 0.3s ease;
     }

     .ncm-item:hover {
         border-color: var(--accent-cyan);
         box-shadow: 0 5px 20px rgba(0, 212, 255, 0.1);
     }

     .ncm-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1rem;
         margin-bottom: 1.5rem;
     }

     .ncm-description {
         background: rgba(0, 0, 0, 0.3);
         padding: 1.5rem;
         border-radius: 10px;
         margin-top: 1rem;
         border-left: 4px solid var(--accent-orange);
     }

     .ncm-description h4 {
         color: var(--accent-orange);
         margin-bottom: 0.5rem;
         font-size: 1.1rem;
     }

     .descricao-text {
         color: var(--text-secondary);
         margin-bottom: 1rem;
         font-style: italic;
     }

     .aliquotas-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
         gap: 0.8rem;
     }

     .aliquota-item {
         background: var(--gradient-primary);
         color: var(--primary-dark);
         padding: 0.6rem;
         border-radius: 8px;
         text-align: center;
         font-size: 0.85rem;
         font-weight: 600;
     }

     .btn-actions {
         display: flex;
         gap: 1rem;
         margin-top: 1rem;
     }

     .btn-add-ncm,
     .btn-remove-ncm {
         padding: 0.8rem 1.5rem;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         font-size: 0.9rem;
         font-weight: 600;
         transition: all 0.3s ease;
         font-family: 'Inter', sans-serif;
     }

     .btn-add-ncm {
         background: var(--success-color);
         color: var(--primary-dark);
     }

     .btn-add-ncm:hover {
         background: #2ed100;
         transform: translateY(-2px);
     }

     .btn-remove-ncm {
         background: var(--error-color);
         color: white;
     }

     .btn-remove-ncm:hover {
         background: #ff3742;
         transform: translateY(-2px);
     }

     /* ===== CALCULATE BUTTON ===== */
     .calculate-btn {
         background: var(--gradient-primary);
         color: var(--primary-dark);
         border: none;
         padding: 1.2rem 3rem;
         font-size: 1.1rem;
         font-weight: 700;
         border-radius: 50px;
         cursor: pointer;
         display: block;
         margin: 3rem auto;
         transition: all 0.3s ease;
         text-transform: uppercase;
         letter-spacing: 1px;
         box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
     }

     .calculate-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
     }

     /* ===== RESULTS SECTION ===== */
     .results-section {
         display: none;
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.5s ease;
     }

     .results-section.show {
         display: block;
         opacity: 1;
         transform: translateY(0);
     }

     .results-table {
         background: var(--gradient-dark);
         padding: 2.5rem;
         border-radius: 20px;
         margin-bottom: 2rem;
         border: 1px solid var(--border-color);
         box-shadow: 0 10px 30px rgba(0, 212, 255, 0.05);
     }

     .results-table h3 {
         color: var(--accent-cyan);
         margin-bottom: 1.5rem;
         font-size: 1.4rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .table-container {
         overflow-x: auto;
         border-radius: 10px;
     }

     table {
         width: 100%;
         border-collapse: collapse;
         background: rgba(0, 0, 0, 0.2);
         border-radius: 10px;
         overflow: hidden;
     }

     th,
     td {
         padding: 1rem;
         text-align: left;
         border-bottom: 1px solid var(--border-color);
     }

     th {
         background: rgba(0, 0, 0, 0.4);
         color: var(--accent-cyan);
         font-weight: 600;
         font-size: 0.9rem;
     }

     td {
         color: var(--text-primary);
         font-size: 0.9rem;
     }

     .importacao-direta {
         background: rgba(57, 255, 20, 0.1) !important;
         color: var(--success-color) !important;
     }

     .overseas-co3 {
         background: rgba(255, 140, 0, 0.1) !important;
         color: var(--accent-orange) !important;
     }

     .total-row {
         background: rgba(0, 212, 255, 0.1) !important;
         font-weight: 700;
     }

     .economia-row {
         background: rgba(57, 255, 20, 0.1) !important;
         color: var(--success-color) !important;
         font-weight: 700;
     }

     /* ===== DETAILS BUTTON ===== */
     .details-button-container {
         display: flex;
         justify-content: center;
         margin: 2rem 0;
     }

     .details-btn {
         background: var(--gradient-primary);
         color: var(--primary-dark);
         border: none;
         padding: 1rem 2rem;
         font-size: 1rem;
         font-weight: 600;
         border-radius: 25px;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .details-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
     }

     .details-section {
         display: none;
         opacity: 0;
         transform: translateY(20px);
         transition: all 0.5s ease;
     }

     .details-section.show {
         display: block;
         opacity: 1;
         transform: translateY(0);
     }

     /* ===== WHATSAPP BUTTON ===== */
     .whatsapp-float {
         position: fixed;
         bottom: 2rem;
         right: 2rem;
         width: 60px;
         height: 60px;
         background: #25d366;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         color: white;
         z-index: 999;
         transition: all 0.3s ease;
         box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
         animation: pulse-whatsapp 2s infinite;
     }

     .whatsapp-float:hover {
         transform: scale(1.1);
         box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
     }

     @keyframes pulse-whatsapp {
         0% {
             box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
         }

         70% {
             box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
         }

         100% {
             box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
         }
     }

     /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
         .mobile-toggle {
             display: flex;
         }

         .nav-links {
             position: fixed;
             top: -100vh;
             left: 0;
             width: 100vw;
             height: 100vh;
             background: rgba(10, 10, 10, 0.98);
             flex-direction: column;
             justify-content: center;
             align-items: center;
             transition: top 0.3s ease;
             backdrop-filter: blur(20px);
             opacity: 0;
             visibility: hidden;
         }

         .nav-links.active {
             top: 0;
             opacity: 1;
             visibility: visible;
         }

         .nav-links li {
             margin: 1rem 0;
             text-align: center;
         }

         .nav-links a {
             font-size: 1.3rem;
             padding: 1rem 2rem;
             display: block;
         }

         .dropdown-content {
             position: static;
             opacity: 1;
             visibility: visible;
             transform: none;
             background: none;
             border: none;
             padding: 0;
             margin-top: 1rem;
         }

         .hero-calculator {
             padding: 40px 5% 30px;
         }

         .hero-calculator h1 {
             font-size: 2rem;
         }

         .calculator-section {
             padding: 40px 5%;
         }

         .form-section,
         .ncm-section,
         .results-table {
             padding: 1.5rem;
         }

         .form-grid {
             grid-template-columns: 1fr;
             gap: 1rem;
         }

         .ncm-grid {
             grid-template-columns: 1fr;
         }

         .aliquotas-grid {
             grid-template-columns: 1fr 1fr;
         }

         .features-grid {
             grid-template-columns: 1fr;
             gap: 1rem;
         }

         .table-container {
             font-size: 0.8rem;
         }

         th,
         td {
             padding: 0.6rem 0.4rem;
         }

         .whatsapp-float {
             bottom: 1rem;
             right: 1rem;
             width: 50px;
             height: 50px;
         }
     }

     @media (max-width: 480px) {
         nav {
             padding: 0 4%;
         }

         .logo-img {
             height: 150px;
         }

         .calculate-btn {
             padding: 1rem 2rem;
             font-size: 1rem;
         }

         .btn-actions {
             flex-direction: column;
             gap: 0.5rem;
         }

         .features-grid {
             gap: 0.8rem;
         }

         .feature-item {
             padding: 1rem;
         }
     }

     /* ===== ANIMATIONS ===== */
     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .fade-in {
         animation: fadeIn 0.6s ease forwards;
     }

     /* ===== LOADING STATE ===== */
     .loading {
         opacity: 0.6;
         pointer-events: none;
     }

     .loading::after {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 20px;
         height: 20px;
         margin: -10px 0 0 -10px;
         border: 2px solid var(--accent-cyan);
         border-top: 2px solid transparent;
         border-radius: 50%;
         animation: spin 1s linear infinite;
     }

     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     /* ===== ACCESSIBILITY ===== */
     button:focus,
     input:focus,
     select:focus {
         outline: 2px solid var(--accent-cyan);
         outline-offset: 2px;
     }

     ::selection {
         background: var(--accent-cyan);
         color: var(--primary-dark);
     }

     /* ===== SCROLLBAR ===== */
     ::-webkit-scrollbar {
         width: 8px;
     }

     ::-webkit-scrollbar-track {
         background: var(--primary-dark);
     }

     ::-webkit-scrollbar-thumb {
         background: var(--gradient-primary);
         border-radius: 4px;
     }

     ::-webkit-scrollbar-thumb:hover {
         background: var(--accent-cyan);
     }

     /* ===== ESTILOS PARA FEEDBACK VISUAL NCM ===== */

     /* Estados de validação NCM */
     .ncm-item.ncm-success {
         border-color: var(--success-color) !important;
         box-shadow: 0 0 20px rgba(57, 255, 20, 0.2) !important;
     }

     .ncm-item.ncm-error {
         border-color: var(--error-color) !important;
         box-shadow: 0 0 20px rgba(255, 71, 87, 0.2) !important;
     }

     .ncm-item.ncm-loading {
         border-color: var(--accent-cyan) !important;
         box-shadow: 0 0 20px rgba(0, 212, 255, 0.2) !important;
         position: relative;
     }

     .ncm-item.ncm-loading::after {
         content: '';
         position: absolute;
         top: 10px;
         right: 10px;
         width: 16px;
         height: 16px;
         border: 2px solid var(--accent-cyan);
         border-top: 2px solid transparent;
         border-radius: 50%;
         animation: spin 1s linear infinite;
     }

     /* Estados do texto de descrição */
     .descricao-text.success {
         color: var(--success-color);
         font-weight: 500;
         font-style: normal;
     }

     .descricao-text.error {
         color: var(--error-color);
         font-weight: 500;
         font-style: italic;
     }

     .descricao-text.loading {
         color: var(--accent-cyan);
         font-style: italic;
     }

     /* Animação para as alíquotas quando carregadas */
     .aliquota-item.loaded {
         animation: pulseSuccess 0.6s ease-out;
     }

     @keyframes pulseSuccess {
         0% {
             transform: scale(1);
             box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.4);
         }

         50% {
             transform: scale(1.05);
             box-shadow: 0 0 0 10px rgba(57, 255, 20, 0);
         }

         100% {
             transform: scale(1);
             box-shadow: 0 0 0 0 rgba(57, 255, 20, 0);
         }
     }

     /* Estado do input NCM */
     .ncm-input.valid {
         border-color: var(--success-color);
         background: rgba(57, 255, 20, 0.05);
     }

     .ncm-input.invalid {
         border-color: var(--error-color);
         background: rgba(255, 71, 87, 0.05);
     }

     .ncm-input.loading {
         border-color: var(--accent-cyan);
         background: rgba(0, 212, 255, 0.05);
     }

     /* Tooltip para mostrar NCM formatado */
     .ncm-tooltip {
         position: absolute;
         top: -35px;
         left: 50%;
         transform: translateX(-50%);
         background: rgba(0, 0, 0, 0.9);
         color: white;
         padding: 0.5rem 0.8rem;
         border-radius: 6px;
         font-size: 0.8rem;
         font-weight: 500;
         white-space: nowrap;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.3s ease;
         z-index: 1000;
     }

     .ncm-tooltip.show {
         opacity: 1;
     }

     .ncm-tooltip::after {
         content: '';
         position: absolute;
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
         border: 5px solid transparent;
         border-top-color: rgba(0, 0, 0, 0.9);
     }

     /* Input group com position relative para tooltip */
     .form-group {
         position: relative;
     }

     /* Animação de digitação */
     .ncm-input.typing {
         border-color: var(--accent-cyan);
         box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
     }

     /* Estilos para diferentes tipos de alíquota */
     .aliquota-item.zero {
         background: rgba(136, 136, 136, 0.2);
         color: var(--text-muted);
     }

     .aliquota-item.baixa {
         background: rgba(57, 255, 20, 0.8);
         color: var(--primary-dark);
     }

     .aliquota-item.media {
         background: rgba(255, 140, 0, 0.8);
         color: var(--primary-dark);
     }

     .aliquota-item.alta {
         background: rgba(255, 71, 87, 0.8);
         color: white;
     }

     /* Responsividade para mobile */
     @media (max-width: 768px) {
         .ncm-tooltip {
             font-size: 0.75rem;
             padding: 0.4rem 0.6rem;
         }

         .aliquotas-grid {
             grid-template-columns: 1fr 1fr;
             gap: 0.5rem;
         }

         .aliquota-item {
             padding: 0.4rem;
             font-size: 0.8rem;
         }
     }

     /* ==========================================
   CSS MOBILE - CAMPOS INLINE HORIZONTAL
   Para telas menores que 768px
========================================== */

@media (max-width: 768px) {
    /* FORM GROUPS - Layout horizontal */
    .form-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

    /* LABELS - Largura fixa à esquerda */
    .form-group label {
        flex: 0 0 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        margin-bottom: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* INPUTS E SELECTS - Ocupam espaço restante */
    .form-group input,
    .form-group select {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0.7rem !important;
        font-size: 0.85rem !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 10px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        color: var(--text-primary) !important;
    }

    /* FORM GRID - Uma coluna no mobile */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* SEÇÕES - Padding ajustado */
    .form-section,
    .ncm-section {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* NCM GRID - Layout específico */
    .ncm-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* NCM GRID FORM GROUPS */
    .ncm-grid .form-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .ncm-grid .form-group label {
        flex: 0 0 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 0.8rem !important;
    }

    .ncm-grid .form-group input,
    .ncm-grid .form-group select {
        flex: 1 !important;
        padding: 0.6rem !important;
        font-size: 0.8rem !important;
    }

    /* NCM ITEM - Container dos NCMs */
    .ncm-item {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 15px !important;
        border: 1px solid rgba(0, 212, 255, 0.2) !important;
    }

    /* BOTÕES DE AÇÃO NCM */
    .btn-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        justify-content: center !important;
        margin-top: 1rem !important;
    }

    .btn-add-ncm,
    .btn-remove-ncm {
        padding: 0.7rem 1.25rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    /* DESCRIÇÃO NCM */
    .ncm-description {
        margin-top: 1rem !important;
        padding: 1rem !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 10px !important;
        border-left: 4px solid var(--accent-orange) !important;
    }

    .ncm-description h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        color: var(--accent-orange) !important;
    }

    .descricao-text {
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        margin-bottom: 0.75rem !important;
    }

    /* ALÍQUOTAS GRID */
    .aliquotas-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .aliquota-item {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    /* BOTÃO CALCULAR */
    .calculate-btn {
        padding: 1rem 2.5rem !important;
        font-size: 1rem !important;
        margin: 2rem auto !important;
        display: block !important;
        border-radius: 50px !important;
    }

    /* TÍTULO DAS SEÇÕES */
    .form-section h2 {
        font-size: 1.4rem !important;
        margin-bottom: 1.25rem !important;
        color: var(--accent-cyan) !important;
    }

    .ncm-section h2 {
        font-size: 1.4rem !important;
        margin-bottom: 1.25rem !important;
        color: var(--accent-cyan) !important;
    }
}

/* ==========================================
   AJUSTES PARA TELAS MUITO PEQUENAS
   Para telas menores que 480px
========================================== */

@media (max-width: 480px) {
    /* Labels ainda menores */
    .form-group label {
        flex: 0 0 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        font-size: 0.8rem !important;
    }

    /* Gap menor */
    .form-group {
        gap: 0.75rem !important;
    }

    /* NCM labels menores */
    .ncm-grid .form-group label {
        flex: 0 0 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        font-size: 0.75rem !important;
    }

    /* Inputs menores */
    .form-group input,
    .form-group select {
        padding: 0.6rem !important;
        font-size: 0.8rem !important;
    }

    .ncm-grid .form-group input,
    .ncm-grid .form-group select {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Seções com menos padding */
    .form-section,
    .ncm-section {
        padding: 1.25rem !important;
    }

    /* Botões menores */
    .btn-add-ncm,
    .btn-remove-ncm {
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

/* ===== INFO ICON E TOOLTIP ===== */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--gradient-primary);
    color: var(--primary-dark);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
    cursor: help;
    position: relative;
    transition: all 0.3s ease;
    z-index: 999998;
}

.info-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 400;
    width: 200px;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 999999;
    margin-left: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

.info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

.info-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000000;
    margin-left: 2px;
}

.info-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Tooltip responsivo para mobile */
@media (max-width: 768px) {
    .info-icon::after {
        max-width: 200px;
        font-size: 11px;
        padding: 6px 8px;
        left: auto;
        right: 0;
        transform: none;
    }

    .info-icon::before {
        left: auto;
        right: 20px;
        transform: none;
    }
}

.descricao-text:not([data-erro="true"]) {
    color: #00ff88 !important;
}

/* NCM Interface Styles - Fixes */
.descricao-text:not([data-erro="true"]) {
    color: #00ff88 !important;
}

.descricao-text[data-erro="true"] {
    color: #ff4757 !important;
}

.ncm-item.ncm-success {
    border-left: 3px solid #00ff88;
}

.ncm-item.ncm-error {
    border-left: 3px solid #ff4757;
}

.ncm-input.valid {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}

.ncm-input.invalid {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
}

/* ===== PTAX – estilos responsivos (ajuste de centralização) ===== */
.ptax-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
}

/* novo: contêiner do input + botão */
.ptax-field {
  position: relative;     /* referencia para o botão absoluto */
  width: 100%;
  min-width: 0;
}

.ptax-field > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.25rem; /* espaço pro botão */
}

/* botão agora ancorado ao .ptax-field, então centraliza no input certinho */
.ptax-refresh-inline {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);  /* centralização vertical perfeita */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
  padding: 0;
  line-height: 1;
}
.ptax-refresh-inline:hover { opacity: 1; }
.ptax-refresh-inline svg { pointer-events: none; }

/* linha de status */
.ptax-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  opacity: 0.85;
}

/* loading control via wrapper */
.ptax-spinner { display: none; }
.ptax-wrap[data-loading="true"] .ptax-spinner { display: inline; }
.ptax-wrap[data-loading="true"] .ptax-refresh-inline svg {
  animation: ptax-spin 0.9s linear infinite;
}
@keyframes ptax-spin { to { transform: rotate(360deg); } }

/* mobile */
@media (max-width: 480px) {
  .ptax-tools { font-size: 11px; gap: 6px; }
  .ptax-refresh-inline { width: 26px; height: 26px; right: 8px; }
  .ptax-field > input { padding-right: 2.6rem; }
}

/* segurança em colunas */
.form-group, .campo, .field, .input-wrapper { min-width: 0; }

/* ===== FIX MOBILE - APENAS 3 PRIMEIROS CAMPOS (Nome, Telefone, Email) ===== */
/* Adicionar NO FINAL do calculadora.css */

@media (max-width: 768px) {
    
    /* APENAS os 3 primeiros form-groups da primeira seção */
    .form-section:first-of-type .form-grid .form-group:nth-child(1),
    .form-section:first-of-type .form-grid .form-group:nth-child(2),
    .form-section:first-of-type .form-grid .form-group:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Labels desses 3 campos */
    .form-section:first-of-type .form-grid .form-group:nth-child(1) label,
    .form-section:first-of-type .form-grid .form-group:nth-child(2) label,
    .form-section:first-of-type .form-grid .form-group:nth-child(3) label {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem !important;
        text-align: left !important;
        font-size: 0.9rem !important;
    }
    
    /* Inputs desses 3 campos */
    .form-section:first-of-type .form-grid .form-group:nth-child(1) input,
    .form-section:first-of-type .form-grid .form-group:nth-child(2) input,
    .form-section:first-of-type .form-grid .form-group:nth-child(3) input {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 50px !important;
        font-size: 16px !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Hints (telefone e email) */
    .form-section:first-of-type .form-grid .form-group:nth-child(2) small,
    .form-section:first-of-type .form-grid .form-group:nth-child(3) small {
        display: block !important;
        width: 100% !important;
        font-size: 0.8rem !important;
        color: #888 !important;
        margin-top: 4px !important;
    }
}

/* iPhone específico */
@media (max-width: 428px) {
    .form-section:first-of-type .form-grid .form-group:nth-child(1) input,
    .form-section:first-of-type .form-grid .form-group:nth-child(2) input,
    .form-section:first-of-type .form-grid .form-group:nth-child(3) input {
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 15px 16px !important;
    }
}