:root{
    --bg:#F8F7FA; --card:#161a22; --muted:#a8b3cf; --text:#e6e9f2; --brand:#3a9ef0; --brand-pa:#409A3C; --brand-ex:#BE001B; --ok:#4caf50; --warn:#ffb300; --err:#ef5350; --chip:#263042; --chip-offer:#263042;--accent:#8bc34a;
    --border:#1e2430; --chipborder:#334058;
  }
  *{box-sizing:border-box}
  body{margin:0;background:linear-gradient(180deg,#0f1115, #0b0d12 40%, #0f1115);color:var(--text);font:500 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",sans-serif}
  header{max-width:1200px;margin:0 auto;padding:10px 30px 0px}
  header .logo {float: left;}
  header .title{text-align: right; line-height: 0.5;}
  header h1{font-size:20px;letter-spacing:.2px;text-align: right;}
  header p{color:var(--muted);font-size:14px;}
  .wrap{max-width:1200px;margin:0 auto;padding:18px 20px 20px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
  footer {max-width:1100px;margin:0 auto; font-size: small; margin-bottom: 20px;}
  footer span {font-size: x-small; float: right; text-align: right; margin: -20px 0px;}

  .navbar{
    display:flex; gap:12px; align-items:center; justify-content:center;
    padding:10px 20px; border-bottom:1px solid #1e2430; background:#121723;
  }
  .navbar a{
    color:#cfe0ff; text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid #2a3344;
  }
  .navbar a:hover{ background:#1a2130 }
  .config label{display:block; font-size:12px; color:#a8b3cf; margin:12px 0 6px}
  .config input, .config select{ width:100%; padding:12px; border:1px solid #2a3344; border-radius:12px; background:#0f141d; color:#e6e9f2; }
  .page .wrap .card {padding: 16px;}
  

  form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:16px}
  label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
  input,select{width:100%;padding:12px;border:1px solid #2a3344;border-radius:12px;background:#0f141d;color:var(--text);outline:none}
  input::placeholder{color:#6e7b99}

  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
  .col-12{grid-column:span 12}

  .actions{display:flex;gap:10px;align-items:center}
  button{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
  .btn{background:var(--brand);color:#071018}
  .btn.secondary{background:#243048;color:var(--text);border:1px solid #2a3344}
  .btn.ghost{background:transparent;border:1px solid #2a3344;color:var(--text)}
  .btn.brand-pa{background:var(--brand-pa);color:#ffffff;border:0;border-radius:20px;padding: 12px;font-weight:700;cursor:pointer;text-decoration: none; font-size:12px}
  .btn.brand-ex{background:var(--brand-ex);color:#ffffff;border:0;border-radius:20px;padding: 12px;font-weight:700;cursor:pointer;text-decoration: none;  font-size:12px;}
  .hint{color:var(--muted);font-size:12px;margin-top:6px}

  .status{margin:14px 0 0;font-size:14px}
  .status.ok{color:var(--ok)}
  .status.warn{color:var(--warn)}
  .status.err{color:var(--err)}
  .status-addinfo{margin:14px 0 0;font-size:14px}
  .status-addinfo.ok{color:var(--brand)}
  .status-addinfo.warn{color:var(--warn)}
  .status-addinfo.err{color:var(--err)}

  /* ICONS */
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

  .material-icons.pa, .material-icons.ex {
    vertical-align: middle;
    padding-bottom: 2px;
    font-size: 16px;
    color: #c5d1ea; 
  }


  /* GRID CARDS */
  .grid{margin-top:18px;display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:16px}
  .prod{
    grid-column:span 12;background:#0d121a;border:1px solid var(--border);border-radius:14px;padding:14px;
    display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;
  }
  .thumb{
    width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0c1118;border:1px solid #1a2230;
    display:flex;align-items:center;justify-content:center;
  }
  .thumb img{width:100%;height:100%;object-fit:contain;display:block}
  .meta{display:flex;flex-direction:column;gap:6px;min-width:0}
  .head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
  .title{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .chip{font-size:12px;background:var(--chip);border:1px solid var(--chipborder);color:#c5d1ea;padding:6px 8px;border-radius:999px}
  .chip-oferta{font-size:12px;background:#6EBE65;border:1px solid #488B41;color:#000000;padding:6px 8px;border-radius:999px}
  .chip-leve-pague{font-size:12px;background:#57256B;border:1px solid #411F4E;color:#ffffff;padding:6px 8px;border-radius:999px}
  .chip-leve-pague-combine{font-size:12px;background:#FF4D68;border:1px solid #E83A54;color:#ffffff;padding:6px 8px;border-radius:999px}
  .chip-desconto-unidade{font-size:12px;background:#F28635;border:1px solid #F0781E;color:#000000;padding:6px 8px;border-radius:999px}
  .badge{font-size:12px;background:var(--accent);color:#0a1a0a;border-radius:999px;padding:6px 8px;border:1px solid #3a5f2e;font-weight:800}
  .row{color:#c9d3eb;font-size:14px}
  .row b{color:#eaf2ff}
  .price-line{display:flex;align-items:center;gap:8px}
  .price-to{font-weight:800}
  .price-from{color:#9fb0cc;text-decoration:line-through}
  .link{display:inline-block;margin-top:6px;color:#b3d9ff;text-decoration:none}

  /* TABLE */
  .table-wrap{padding:0 16px 16px}
  table{width:100%;border-collapse:separate;border-spacing:0;background:#0d121a;border:1px solid var(--border);border-radius:14px;overflow:hidden}
  thead th{top:0;background:#121826;color:#cfe0ff;font-size:14px;text-align:left;padding:10px;border-bottom:1px solid var(--border)}
  tbody td{padding:10px;border-bottom:1px solid #1a2230;color:#e6eefc;font-size:12px;vertical-align:top}
  tbody tr:last-child td{border-bottom:0}
  td img{width:56px;height:56px;object-fit:contain;background:#0c1118;border:1px solid #1a2230;border-radius:8px}
  .nowrap{white-space:nowrap}
  .num{text-align:right}

  /* OFFER TABLE */
  .offer-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:8px;
    background:#0d121a; border:1px solid #1e2430; border-radius:12px; overflow:hidden }
  .offer-table thead th { background:#121826; color:#cfe0ff; font-size:12px; text-align:left; padding:10px; border-bottom:1px solid #1e2430 }
  .offer-table tbody td { padding:10px; border-bottom:1px solid #1a2230; color:#e6eefc; font-size:14px; vertical-align:top }
  .offer-table tbody tr:last-child td { border-bottom:0 }
  .badge.best { background:#8bc34a; color:#071a07; border:1px solid #3a5f2e; font-weight:800; border-radius:999px; padding:4px 8px; font-size:12px; margin-left:6px }
  .badge.lower { background:#5785c0; color:#ffffff; border:1px solid #2e395f; font-weight:800; border-radius:999px; padding:4px 8px; font-size:12px; margin-left:6px }
  .unavailable { color: #ef5350; font-weight: 700; }
  .available { color: #5def50; font-weight: 700; }
  .available.warn { color: #efca50; font-weight: 700; }

  .footer-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:0 16px 16px}

  /* MODAL - TOOLTIP - POPOVER */
  .tippy-box[data-theme~="popover"] {
    background: #0b1220; color: #e2e8f0; border: 1px solid #1f2937; border-radius: 10px;
  }
  .popover-content { min-width: 240px; }
  .popover-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

  /* Popover tema "popover" (Tippy.js) */
  .tippy-box[data-theme~="popover"]{
    background:#e6e9f2;
    color:#0b1220;
    border:1px solid #1e2430;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  .tippy-box[data-theme~="popover"] .tippy-content{
    padding:10px 12px;
    font-size:12px;
    line-height:1.4;
  }
  .tippy-box[data-theme~="popover"] .tippy-arrow{
    color:#e6e9f2;
  }

  /* Ajustes visuais do MicroModal em modo dark */
  .micromodal-slide .modal__container {
    background-color: #0b1220; color: #e2e8f0; border-radius: 14px; border: 1px solid #1f2937;
  }
  .modal { display: none; }
  .modal[aria-hidden="false"] { display: block; }
  .modal__overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
  }
  .modal__container {
    background-color: #0b1220; color: #e2e8f0; border-radius: 14px; border: 1px solid #1f2937;
    width: min(640px, calc(100vw - 2rem)); max-height: 85vh; overflow-y: auto; padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    z-index: 1;
    
  }
  .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .modal__title { margin: 0; font-size: 18px; }
  .modal__content { margin-top: 8px; padding-left: 30px;}
  .modal__footer { display: block; gap: 8px; margin-top: 14px; margin-bottom: 14px; }
  .modal__close { background: none; border: none; color: #848a94; font-size: 30px; line-height: 1; cursor: pointer;}
  .modal__close:hover { color: #fff; }
  .micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn .2s ease-out; }
  .micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn .2s ease-out; }
  @keyframes mmfadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes mmslideIn { from { transform: translateY(10px) } to { transform: translateY(0) } }

  @media (max-width:900px){
    .col-6,.col-5,.col-4,.col-3{grid-column:span 12}
    .actions{flex-direction:column;align-items:stretch}
    .footer-actions{justify-content:stretch;flex-direction:column;align-items:stretch}
    .prod{grid-template-columns:90px 1fr}
    table{font-size:13px}
    td img{width:44px;height:44px}
  }

  /* grid específico da rota /busca em modo "cards agrupados por EAN" */
  .cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* 1 coluna */
    gap: 16px;
  }

  /* se quiser 2 colunas a partir de 1200px, e 1 coluna no mobile: */
  @media (min-width: 1200px) {
    .cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1600px) {
    .cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* garante que o card ocupe toda a coluna e não “flutue” menor */
  .cards-grid .card.product {
    width: 100%;
    box-sizing: border-box;
  }