.reader-codes-dialog{
  --reader-codes-surface:var(--matches-surface,var(--panel,#fff));
  --reader-codes-text:var(--matches-text,var(--ink,#111));
  --reader-codes-line:var(--matches-line,var(--line,#8886));
  --reader-codes-input:var(--matches-input,var(--field,var(--reader-codes-surface)));
  --reader-codes-soft:var(--matches-soft,var(--selected,var(--reader-codes-surface)));
  box-sizing:border-box;width:min(1250px,96vw);max-height:90dvh;overflow:auto;
  background:var(--reader-codes-surface);color:var(--reader-codes-text);
  border:1px solid var(--reader-codes-line);padding:1rem;font:1rem system-ui,sans-serif;
}
.reader-codes-dialog::backdrop{background:#0007}
.reader-codes-dialog h2,.reader-code-row p{margin:0}
.reader-codes-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.reader-codes-head button{display:grid;place-items:center;line-height:1;padding:.3rem;min-width:2rem;min-height:2rem}
.reader-codes-dialog button{cursor:pointer;background:var(--reader-codes-surface)}
.reader-codes-dialog button:hover:not(:disabled){background:var(--reader-codes-soft)}
.reader-codes-dialog button:disabled{cursor:not-allowed}
.reader-codes-dialog input,.reader-codes-dialog button,.reader-codes-dialog select,.reader-codes-dialog textarea{
  font:inherit;max-width:100%;box-sizing:border-box;color:var(--reader-codes-text);border:1px solid var(--reader-codes-line);
}
.reader-codes-dialog input,.reader-codes-dialog select,.reader-codes-dialog textarea{background:var(--reader-codes-input)}
.reader-code-row{border-block-start:1px solid var(--reader-codes-line);padding-block:1rem}
.reader-code-controls{display:flex;gap:.5rem;margin-top:.5rem}
.reader-code-controls input{flex:1;min-width:0}
.reader-codes-status:empty{display:none}
.reader-codes-table{overflow:auto;margin-block:1rem}
.reader-codes-dialog table{border-collapse:collapse;width:100%}
.reader-codes-dialog th,.reader-codes-dialog td{padding:.4rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--reader-codes-line)}
.reader-codes-dialog th{background:var(--reader-codes-soft);color:var(--reader-codes-text)}
.reader-codes-dialog small{display:block}
.reader-codes-dialog form{display:grid;gap:.5rem;margin-top:1rem}
.reader-codes-dialog textarea{width:100%;font-family:monospace}
.reader-codes-dialog pre{white-space:pre-wrap;max-width:25rem}
.reader-codes-dialog details{border-top:1px solid var(--reader-codes-line);padding-top:1rem}
#reader-codes-dialog{width:min(650px,96vw)}