/* ---------- Tokens (única cor de destaque; semântica: verde = melhor preço) ---------- */
:root{
  --bg:#f6f7f9;--card:#fff;--border:#e3e6eb;--text:#12151b;--muted:#667085;
  --accent:#4f46e5;--accent-soft:#eef0ff;--on-accent:#fff;
  --good:#12805c;--good-soft:#e8f6ef;--bad:#b42318;--bad-soft:#fdecea;
  --radius:12px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-accent="blue"]{--accent:#2563eb;--accent-soft:#e8f0ff}
[data-theme="dark"]{--bg:#0f1115;--card:#171a21;--border:#2a2f3a;--text:#e8eaf0;--muted:#98a1b3;--accent:#818cf8;--accent-soft:#1f2140;--on-accent:#0f1115;--good:#34d399;--good-soft:#12261f;--bad:#f87171;--bad-soft:#2b1618}
[data-theme="dark"][data-accent="blue"]{--accent:#60a5fa;--accent-soft:#16233d}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top,main{max-width:640px;margin:0 auto;padding-left:16px;padding-right:16px}
.top{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:8px}
main{display:grid;gap:16px;padding-bottom:56px}
.stack{display:grid;gap:16px}
h2{font-size:15px;margin:0 0 8px}
.lead,.muted,small{color:var(--muted)}
.lead{margin:0}

/* ---------- Header ---------- */
.brand{display:flex;align-items:center;gap:10px;font-weight:650}
.logo{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:700}
.tools{display:flex;gap:8px}
.seg{display:flex;border:1px solid var(--border);border-radius:10px;background:var(--card);padding:2px}
.seg button{border:0;background:none;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.moon,[data-theme="dark"] .sun{display:none}
[data-theme="dark"] .moon{display:block}

/* ---------- Cards e campos ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.field,.fields label{display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--muted)}
.field+.field{margin-top:14px}
input,select{width:100%;height:44px;padding:0 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:16px;color:var(--text)}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{height:34px;padding:0 14px;border:1px solid var(--border);border-radius:99px;background:var(--card);font-size:14px}
.chips button[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}

/* ---------- Ofertas ---------- */
.offer-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.offer-head strong{flex:1;font-size:15px}
.badge{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.fields{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:12px}
.full{grid-column:1/-1}
.chips.sm button{height:30px;padding:0 12px;font-size:13px}
.money{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;padding-left:12px;background:var(--card)}
.money:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.money input{border:0;box-shadow:none!important;padding-left:6px}

/* ---------- Botões ---------- */
.btn{height:44px;padding:0 18px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.dashed{border-style:dashed;color:var(--accent);background:none}
.ghost{border:0;background:none;color:var(--muted);padding:4px 8px;border-radius:8px}
.ghost:hover{background:var(--bg)}
.actions{display:flex;gap:10px}
.actions .primary{flex:1}

/* ---------- Resultado ---------- */
.hint{color:var(--muted);margin:0}
.summary{margin:0;font-size:18px;font-weight:650}
.summary.ok{color:var(--good)}
.result .muted{margin:2px 0 14px;font-size:14px}
.summary+.ranking{margin-top:14px}
.ranking,.history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ranking li{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px}
.ranking li.best{border-color:var(--good);background:var(--good-soft)}
.ranking .rinfo{flex:1;display:grid}
.ranking b{font-size:17px}
.tag{font-size:13px;font-weight:650;color:var(--muted)}
.best .tag{color:var(--good)}
.best .badge{background:var(--good);color:var(--card)}

/* ---------- Histórico ---------- */
.history>li{padding:12px 0;border-bottom:1px solid var(--border)}
.history>li:last-child{border:0}
.hh{display:flex;justify-content:space-between;align-items:flex-start}
.hh>div{display:grid}
.hs{margin:6px 0 10px;font-weight:600;font-size:14px}
.history .ranking li{padding:8px 10px}
.history .ranking b{font-size:15px}
fieldset.card{margin:0;min-width:0}

/* ---------- Abas, detalhes, lista, impressão ---------- */
[hidden]{display:none!important}
.view{display:grid;gap:16px}
.tabs{display:flex;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:3px}
.tabs button{flex:1;height:38px;border:0;border-radius:9px;background:none;font-weight:600;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.toggle{margin-top:14px;height:34px;padding:0 14px;border:1px dashed var(--border);border-radius:99px;background:none;font-size:14px;color:var(--muted)}
.toggle[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
#itemBox{margin-top:12px}
.note{margin:10px 0 0;font-size:12px;color:var(--muted)}
.actions .btn{flex:1}
.lform{display:grid;gap:12px}
#listFields{display:flex;flex-wrap:wrap;gap:10px}
.lform label,.lform .combo{display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--muted)}
.lform{margin-top:14px}
.lform label{flex:1 1 130px;min-width:0}
.lform .wide{flex:1 1 100%}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.plist li:last-child{border:0}
.plist .iname{flex:1;display:grid;overflow-wrap:anywhere}
.plist li.done .iname{text-decoration:line-through;color:var(--muted)}
.plist input[type=checkbox]{width:20px;height:20px;padding:0;accent-color:var(--accent)}
.tot{margin-top:12px;font-size:15px}
#printarea{display:none}
@media print{
  html,html[data-theme],html[data-theme][data-accent]{--bg:#fff;--card:#fff;--border:#d0d5dd;--text:#000;--muted:#475467;--accent:#4f46e5;--accent-soft:#eef0ff;--good:#12805c;--good-soft:#e8f6ef;--bad:#b42318;--bad-soft:#fdecea}
  body{background:#fff}
  #printarea .cmp-wrap{overflow:visible}
  .top,main{display:none}
  #printarea{display:block;max-width:900px;margin:0 auto;padding:24px}
  #printarea *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printarea h1{font-size:20px;margin:0}
}

/* ---------- Comparativo de listas (colunas dinâmicas: --cols) ---------- */
#savedLists>li{display:grid;gap:8px}
.sl{display:grid}
.cmp-wrap{overflow-x:auto}
.cmp{display:grid;gap:6px;min-width:calc(104px + var(--cols) * 92px)}
.cmp-row{display:grid;grid-template-columns:minmax(104px,1.3fr) repeat(var(--cols),minmax(92px,1fr));gap:6px}
.cmp-head>div{display:grid;align-content:end;padding:4px 6px;font-size:13px;color:var(--muted)}
.cmp-head b{color:var(--text);font-size:14px}
.cmp-head .win,.cmp-head .win b{color:var(--good)}
.cmp-item{display:grid;padding:6px 4px;overflow-wrap:anywhere}
.cmp-item small{color:var(--muted)}
.cmp-item .sv{color:var(--good);font-weight:600}
.cmp-c{display:grid;place-items:center;padding:8px 4px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:600}
.cmp-c.low{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.cmp-c.high{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.cmp-c.na{color:var(--muted);font-weight:400}
.cmp-foot{margin-top:6px;padding-top:10px;border-top:1px solid var(--border)}

/* ---------- Lista: kg/qtd, diálogo, vínculos ---------- */
.lform .chk{display:flex;align-items:center;gap:8px;height:44px;margin-top:20px;font-size:14px;color:var(--text)}
.lform input[type=checkbox]{width:20px;height:20px;padding:0;accent-color:var(--accent)}
.q-kg,.lform.kg .q-un{display:none}
.lform.kg .q-kg{display:inline}
.iprice{display:grid;text-align:right}
.iprice small{white-space:nowrap}
dialog{width:calc(100% - 32px);max-width:360px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog p{margin:0}
dialog .actions{flex-direction:column;margin-top:16px}
.linkout{margin-top:10px}
.linkout .muted{margin:0 0 8px;font-size:14px}
.linkout h2{margin-top:16px}

/* ---------- Ícones, busca com lista suspensa ---------- */
.ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.tabs button{display:flex;align-items:center;justify-content:center;gap:6px}
.lead{display:flex;gap:8px}
.lead .ic{margin-top:4px}
h2 .ic{vertical-align:-.2em}
.sav{display:flex;align-items:center;gap:6px}
.sv .ic{width:1em;height:1em}
.lform .combo{position:relative;display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--muted)}
.cbx{position:relative}
.cbx .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cbx input{padding-left:38px}
.clist{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;max-height:240px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.clist li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text)}
.clist li small{color:var(--muted);font-size:12px;white-space:nowrap}
.clist li:hover,.clist li.act{background:var(--accent-soft)}
.cmp-c small{font-size:11px;font-weight:400;text-align:center;opacity:.85}
.cmp-c{font-size:13px}
.cmp-c span{white-space:nowrap}
.sav .ic{width:1.3em;height:1.3em}
.tabs button{white-space:nowrap}
.linkout [data-act=lpick],.linkout [data-act=lmatch]{border:1px solid var(--border);color:var(--accent);font-weight:600;padding:6px 12px;white-space:nowrap}

/* ---------- Duplicar e comparar, preço na linha ---------- */
.hv{display:flex;align-items:center;gap:6px}
.hv .ghost:last-child{margin-left:auto}
.chipbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:99px;background:var(--card);font-size:14px;font-weight:600;color:var(--accent)}
.banner{display:grid;gap:10px;padding:14px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);font-size:14px}
.pin{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:13px;color:var(--muted)}
.pin:focus-within{border-color:var(--accent)}
.pin input{width:68px;height:34px;padding:0;border:0;background:transparent;box-shadow:none!important;text-align:right;font-size:15px;font-weight:600}
.pin em{font-style:normal;font-size:12px}
.iprice small{display:block;min-height:0}

/* ---------- Preço pendente e link de ajuda ---------- */
.pin.empty{border:1px dashed var(--accent)}
.linkbtn{padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline}

/* ---------- Arquivo: salvar e importar ---------- */
.btn .ic{margin-right:6px}
.fileactions{margin-top:12px}
.hv{flex-wrap:wrap}
.actions .btn{padding:0 10px;white-space:nowrap}
.hv .ghost .ic{width:1.3em;height:1.3em}