/* DS2 - Trocar (ds2-trocar.js, Lina 21/out). So tokens DS2. Cor so no botao primario; resto neutro. */
.trc{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--text);overflow:auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.trc[hidden]{display:none}
.trc-top{display:flex;align-items:center;gap:8px;max-width:480px;margin:0 auto 12px}
.trc-top h2{margin:0;font:600 18px/1.2 var(--f-display)}
.trc-b{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.trc .block{display:flex;width:100%}
.trc .stack{display:flex;flex-direction:column;gap:8px}
.trc .hint{font-size:13px;color:var(--text-2);margin:0}
.trc .center{text-align:center}
.trc .note{margin:0}
.trc .field .ctl .chip{flex:none}
.trc .code{word-break:break-all;font-size:13px;margin:0}
.trc .qr{width:200px;max-width:100%;margin:0 auto}
.trc .section-t{margin:0}
.trc .row .val{color:var(--text-2);font-size:14px}
.trc-rv{margin:0;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4)}
.trc-rv div{display:flex;justify-content:space-between;gap:12px}
.trc-rv dt{color:var(--text-2)}
.trc-rv dd{margin:0;text-align:right;word-break:break-all}
.trc-rv .tot{border-top:1px solid var(--border);padding-top:10px;font-weight:600}
.trc-rv .tot dt{color:var(--text)}
.trc-pair{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:16px;margin:0}
.trc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s2) var(--s4)}
.trc-steps li{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--text-2)}
.trc-steps li.done{color:var(--text)}
.trc-steps li.now{color:var(--text);font-weight:600}
.trc-steps li .i{flex:none}
.trc-ok{display:grid;place-items:center;width:56px;height:56px;margin:4px auto 0;border-radius:var(--r-pill);border:2px solid var(--ok);color:var(--ok)}
.trc-spin{width:28px;height:28px;margin:24px auto;border-radius:50%;border:3px solid var(--border);border-top-color:var(--text);animation:trc-r 1s linear infinite}
@keyframes trc-r{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.trc-spin{animation:none}}
/* A5 conferencia do destino + comparador (21/out) */
.trc-dest{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border)}
.trc-dest-h{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.trc-dest-net{margin:0;display:flex;justify-content:space-between;gap:8px}
.trc-dest-a{margin:0;word-break:break-all;font-size:14px;line-height:1.5}
.trc-dest-a mark{background:transparent;color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.trc .row.trc-best{border:2px solid var(--ok);border-radius:var(--r-lg)}
.trc .row.trc-off{opacity:1;color:var(--text-2)}
/* comparador: --text-2 sobre --bg-2 (hover/foco) dava 4,66:1 no tema claro; --text da 17,3:1. So tokens DS2. */
#trc-opts .row .tx span,#trc-opts .row.trc-off{color:var(--text)}
/* Tela simples (25/out, pacote aprovado 24/out): 3 blocos, seletores, Detalhes. So tokens DS2. */
.trc-top .trc-hist{margin-left:auto;position:relative}
.trc-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--text);color:var(--bg);font-size:11px;line-height:18px;font-weight:600;text-align:center}
.trc-blk{display:flex;flex-direction:column;gap:10px}
.trc-blk h3{margin:0;font:600 13px/1.2 var(--f-text);color:var(--text-2);text-transform:none;letter-spacing:0}
.trc-sel{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.trc-sel:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.trc-sel .ic{flex:none;display:grid;place-items:center;width:32px;height:32px}
.trc-sel .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trc-sel .tx b{font-weight:600;overflow-wrap:anywhere}
.trc-sel .tx span{font-size:13px;color:var(--text)}
.trc-sel .val{flex:none;font-size:14px;color:var(--text)}
.trc-sel .chev{flex:none}
.trc-sel[aria-expanded="true"] .chev{transform:rotate(90deg)}
.trc-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.trc-opts .trc-sel{background:var(--surface)}
.trc-big{font:600 28px/1.2 var(--f-display);min-height:var(--tap)}
.trc-u{flex:none;padding:0 12px;color:var(--text);font-weight:600}
#trc-btc{min-height:1em;color:var(--text)}
.trc-det{background:transparent}
.trc-seg{display:flex;flex-wrap:wrap;gap:8px}
.trc-seg .chip{min-height:var(--tap)}
.trc-seg .chip[aria-pressed="true"]{border:2px solid var(--text);font-weight:600}
.trc .note b{font-weight:700}
.trc-b{gap:10px}
.trc-blk .trc-dest{padding:12px;gap:4px;border-radius:var(--r-md)}
.trc-blk .trc-dest-a{font-size:13px;line-height:1.45}
.trc-blk .trc-dest .hint{font-size:12px}