.variant-comparison{grid-column:1/-1;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-strong,#3d3d4a);min-width:0}
.variant-comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.variant-comparison h3{font-size:16px;line-height:1.35;margin:0;font-weight:600}
.variant-frame-toggle{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px;cursor:pointer}
.variant-frame-toggle input{width:18px;height:18px;accent-color:var(--accent,#c3adff)}
.variant-note,.variant-preview-message{font-size:12px;line-height:1.6;color:var(--text-secondary,#b4b4c2);margin:8px 0 16px;max-width:70ch}
.variant-preview-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.variant-preview-controls label,.variant-style-row label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--text-secondary,#b4b4c2);min-width:0}
.variant-preview-controls label:first-child{flex:1 1 210px}
.variant-preview-controls label:nth-child(2){flex:0 0 100px}
.variant-comparison select,.variant-comparison input:not([type=checkbox]){font:inherit;font-size:13px;color:var(--text,#f1f1f5);background:var(--surface,#1b1b23);border:1px solid var(--border-strong,#3d3d4a);border-radius:10px;min-height:44px;padding:9px 11px;width:100%;box-sizing:border-box}
.variant-comparison :focus-visible,.variant-image-dialog :focus-visible{outline:2px solid var(--accent,#c3adff);outline-offset:3px}
.variant-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.variant-preview-grid:empty{display:none}
.variant-preview-grid figure{margin:0;min-width:0}
.variant-image-button{display:block;width:100%;padding:0;border:1px solid var(--border-strong,#3d3d4a);border-radius:10px;overflow:hidden;background:#101014;cursor:zoom-in}
.variant-image-button:hover{border-color:var(--accent,#c3adff)}
.variant-image-button img{display:block;width:100%;height:280px;object-fit:contain}
.variant-preview-grid figcaption{font-size:12px;line-height:1.5;padding:8px 0 0;overflow-wrap:anywhere;color:var(--text-secondary,#b4b4c2)}
.variant-style-tools{margin-top:20px;border-top:1px solid var(--border-strong,#3d3d4a);padding-top:12px}
.variant-style-tools summary{cursor:pointer;font-size:13px;min-height:32px;line-height:32px}
.variant-style-row{display:flex;gap:10px;align-items:end;margin-top:12px;flex-wrap:wrap}
.variant-style-row label{flex:1 1 200px}
.variant-image-dialog{width:max-content;max-width:94vw;max-height:94vh;padding:14px;border:1px solid var(--border-strong,#3d3d4a);border-radius:14px;background:var(--surface,#1b1b23);color:var(--text,#f1f1f5)}
.variant-image-dialog::backdrop{background:rgba(0,0,0,.75)}
.variant-image-dialog img{display:block;width:auto;max-width:86vw;height:auto;max-height:78vh;margin-top:12px;object-fit:contain}
@media(max-width:650px){.variant-preview-controls label:first-child{flex-basis:100%}.variant-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.variant-image-button img{height:180px}.variant-preview-grid figcaption{font-size:11px}.variant-comparison-heading{gap:4px}.variant-style-row button{flex:1}.variant-image-dialog{padding:10px}}
@media(max-width:400px){.variant-image-button img{height:140px}}
.appearance-modes{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:16px 0}
.appearance-modes label{flex:1 1 195px;display:flex;gap:10px;align-items:flex-start;min-width:0;padding:12px;border:1px solid var(--border-strong,#3d3d4a);border-radius:10px;cursor:pointer}
.appearance-modes label:has(input:checked){border-color:var(--accent,#c3adff);background:var(--accent-soft,rgba(195,173,255,.09))}
.appearance-modes input[type=radio]{width:17px;min-height:17px;height:17px;margin:2px 0 0;padding:0;accent-color:var(--accent,#c3adff);flex:none}
.appearance-modes b,.appearance-modes small{display:block;font-size:13px;line-height:1.5}
.appearance-modes small{font-size:12px;color:var(--text-secondary,#b4b4c2);margin-top:3px}
.appearance-fixed{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,1.5fr);align-items:end;gap:20px;margin:18px 0 8px}
.appearance-fixed[hidden],.appearance-fixed [hidden]{display:none}
.appearance-fixed label{display:flex;gap:7px;flex-direction:column;font-size:12px;color:var(--text-secondary,#b4b4c2);min-width:0}
.appearance-frame-fields{display:grid;grid-template-columns:68px 1fr 1fr;align-items:end;gap:16px}
.appearance-fixed input[type=color]{height:44px;min-height:44px;padding:4px;cursor:pointer}
.appearance-fixed input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--accent,#c3adff);cursor:pointer}
.appearance-fixed output{font-variant-numeric:tabular-nums;color:var(--text,#f1f1f5)}
.appearance-modes label:has(input:disabled){cursor:wait;opacity:.65}
@media(max-width:760px){.appearance-fixed{grid-template-columns:1fr}.appearance-modes label{flex-basis:100%}.appearance-frame-fields{gap:12px}}