.codes-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);overflow:hidden}
.codes-table-wrap table{margin:0}
.codes-table-wrap th,.codes-table-wrap td{padding-left:18px;padding-right:18px}
.codes-table-wrap tbody tr:last-child td{border-bottom:0}
td .code{font-family:var(--mono);cursor:pointer;font-weight:600;font-size:13.5px;color:var(--text);
  background:var(--surface-2);padding:4px 9px;border-radius:8px;border:1px solid var(--border);
  display:inline-block;transition:border-color .12s,color .12s}
td .code:hover{border-color:var(--accent);color:var(--accent-d)}
td.brandcol{color:var(--text-2)}
td.actions{text-align:right;white-space:nowrap}

/* ===== Mobile: table -> cards ===== */
@media(max-width:680px){
  .codes-table-wrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  .codes-table-wrap table,.codes-table-wrap tbody{display:block}
  .codes-table-wrap thead{display:none}
  .codes-table-wrap tr{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
    box-shadow:var(--shadow-xs);padding:14px 16px;margin-bottom:12px}
  .codes-table-wrap td{display:block;border:0;padding:0;font-size:14px}
  .codes-table-wrap td[data-label="Code"]{grid-column:1}
  .codes-table-wrap td[data-label="Risk"]{grid-column:2;justify-self:end}
  .codes-table-wrap td[data-label="What it does"]{grid-column:1/-1;color:var(--text-2);line-height:1.5}
  .codes-table-wrap td[data-label="Brand"]{grid-column:1/-1;font-size:12.5px;color:var(--text-3)}
  .codes-table-wrap td[data-label="Brand"]::before{content:"Brand: "}
  .codes-table-wrap td.actions{grid-column:1/-1;text-align:left}
  .codes-table-wrap td.actions .btn{width:100%}
}