.pair-preview{border:1px solid var(--line);border-radius:8px;padding:20px var(--s4);margin:0 0 var(--s4);display:grid;gap:10px}
.pair-sample{margin:0;font-size:16px;line-height:1.6}
.pair-large{font-size:24px;font-weight:700;line-height:1.4}
.pair-fields{display:grid;gap:var(--s3);margin-bottom:var(--s3)}
@media(min-width:600px){.pair-fields{grid-template-columns:1fr 1fr}}
.pair-field .row{gap:var(--s2);align-items:center}
.pair-field input[type=color]{inline-size:44px;block-size:44px;padding:2px;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;flex:none}
.pair-field input[type=text]{flex:1;min-inline-size:0;block-size:44px;font-family:var(--font-mono);text-transform:uppercase}
.pair-ratio{margin:var(--s3) 0 var(--s1);font-size:16px}
.pair-ratio strong{font-family:var(--font-mono);font-size:20px}
.pair-verdict{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:6px}
.pair-verdict li{font-size:14px;padding-inline-start:22px;position:relative}
.pair-verdict li::before{position:absolute;inset-inline-start:0;font-weight:700}
.pair-verdict li[data-pass="yes"]::before{content:"✓";color:var(--good)}
.pair-verdict li[data-pass="no"]::before{content:"✕";color:var(--bad)}
.pair-recent{margin:var(--s3) 0}

#palette label[for="color-search"]{display:block;margin-top:var(--s4)}
#palette #basic-label{margin-top:var(--s3)}
.chips .chip[aria-pressed="true"]{background:var(--soft);border-color:var(--edge-strong);color:var(--brand-ink);font-weight:700}

.color-list{display:grid;gap:6px;margin-top:10px;container-type:inline-size}
.color-row{border:1px solid var(--line);border-radius:8px;padding:2px 10px var(--s1)}
.color-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-block-size:44px}
.swatch{inline-size:30px;block-size:30px;border:1px solid var(--line);border-radius:6px;flex:none}
.color-id{flex:1;min-inline-size:120px;display:grid;gap:2px}
@container (min-width:600px){.color-id{grid-template-columns:minmax(0,220px) 1fr;gap:0 var(--s4);align-items:baseline}}
.color-name{font-family:var(--font-mono);font-size:14px;word-break:break-word}
.color-ko{font-size:var(--t2)}
.color-hex{min-block-size:44px;flex:none;padding-inline:var(--s3)}
.color-hex code{font-size:14px}
.color-more>summary{font-size:var(--t2);padding:6px 0;min-block-size:44px}
.color-formats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:2px 0 var(--s2)}
.color-formats .text-btn[data-copy-value]{grid-column:1/-1;justify-content:center}
@container (min-width:520px){.color-formats{grid-template-columns:repeat(4,auto);justify-content:start}
  .color-formats .text-btn[data-copy-value]{grid-column:auto}}
.color-formats .text-btn{min-block-size:44px;display:inline-flex;align-items:center;padding:0 var(--s3);border:1px solid var(--line);border-radius:6px;text-decoration:none}
#pair [hidden]{display:none!important}
.color-input-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-block:var(--s2)}
.color-input-hint{margin-block:var(--s3);font-size:14px;overflow-wrap:anywhere}
.pair-field .note,.pair-field .error{overflow-wrap:anywhere}
.pair-field .error:not([role="status"]){color:var(--mut)}
.pair-field .row{flex-wrap:wrap}
.pair-field .row>input{flex:1 1 7.5em;min-inline-size:7.5em}
.pair-field .row .btn{flex:none;padding-inline:var(--s3);block-size:44px}
.pair-field .error:empty,.pair-field .color-input-actions:not(:has(>button:not([hidden]))){display:none}
#pair .pair-preview{padding:var(--s2) var(--s3);gap:0;margin:var(--s2) 0}
#pair .pair-fields{gap:var(--s2);margin-bottom:0}
#pair .pair-ratio{margin:var(--s2) 0}
.pair-more{margin-block:var(--s2) 0}
.pair-more .pair-verdict{margin-top:var(--s3)}