.background-modes{display:grid;gap:7px}
.background-modes button{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;min-height:58px}
.background-modes button b{font-size:12px;font-weight:600}.background-modes button span{font-size:11px;color:var(--muted)}
.background-modes button[aria-pressed=true]{border-color:#839784;background:#eff3eb}
.background-modes button:focus-visible,.background-preview-controls button:focus-visible{outline:2px solid #4c6a51;outline-offset:3px}
.background-cost-note{font-size:11px;color:var(--muted);line-height:1.55;margin:13px 0 0}
.background-preview-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;margin:13px 0}
.background-preview-controls [role=group]{display:flex;gap:4px;flex-wrap:wrap}
.background-preview-controls button{min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:11px;cursor:pointer}
.background-preview-controls button[aria-pressed=true]{background:#e8eee3;border-color:#839784}
.background-preview-note{font-size:11px;color:var(--muted);margin:9px 0 0}
body .workspace:not(.start) .stage.background-stage{padding:10px;align-items:stretch}
.background-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;height:100%;min-height:0}
.background-comparison.single{grid-template-columns:minmax(0,1fr)}
.background-preview-card{display:flex;flex-direction:column;min-width:0;min-height:0;gap:8px;margin:0}
.background-preview-card figcaption{font-size:11px;font-weight:600;color:var(--muted)}
.background-preview-surface{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;border:1px solid #dfe3dc;border-radius:5px;background:#fff}
.background-preview-surface.checker{background-color:#fff;background-image:conic-gradient(#e2e5de 25%,transparent 0 50%,#e2e5de 0 75%,transparent 0);background-size:20px 20px}
.background-preview-surface.dark{background:#252b28;border-color:#252b28}
body .stage .background-preview-surface img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:none;border-radius:0}
@media(max-width:600px){.background-comparison{gap:6px}.background-preview-card figcaption{font-size:10px}.background-preview-controls{gap:7px}body .workspace:not(.start) .stage.background-stage{min-height:290px}}