.workspace{border:1px solid var(--line);background:var(--surface)}
.workspace .panel{padding:var(--space)}
.workspace label{display:block;margin:0 0 8px;font-weight:650}
.workspace input[type="text"]{display:block;width:100%;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}
.workspace input:focus-visible,.workspace button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.color-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.color-input{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px}
.color-input input[type="color"]{width:48px;height:48px;padding:3px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.actions button{padding:11px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
#preview{padding:20px;border:1px solid var(--line);border-radius:var(--radius);font-size:1.25rem;line-height:1.5}
#preview strong{font-weight:700}
#ratio{font-size:1.4rem}
#status{padding:0 var(--space);overflow-wrap:anywhere}
.results{padding:0 var(--space) var(--space)}
.results p{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;margin:0;overflow-wrap:anywhere}
.pass{color:#176b35}.fail{color:#9a2b2b}
@media(max-width:600px){.color-fields{grid-template-columns:1fr}.workspace .panel{padding:18px}}