.surface-library{position:fixed;inset: auto 12px 12px auto;width:min(640px,calc(100vw - 24px));max-height:78dvh;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper,#fff);box-shadow:0 8px 32px #0003;overflow:auto}
.surface-library::backdrop{background:#0002}
.surface-library h2{margin:0 0 8px;font-size:20px}.surface-library p{font-size:13px;line-height:1.4}
.surface-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.surface-controls label{margin:0}.surface-controls input,.surface-controls select{margin:4px 0;min-height:44px;border:1px solid var(--line);font:inherit;font-size:16px}
.surface-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;margin:10px 0;max-height:28dvh;overflow:auto}.surface-card{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:140px;text-align:left;padding:6px;font:inherit;font-size:12px;cursor:pointer}.surface-card[aria-pressed=true]{outline:3px solid var(--teal,#187a70);outline-offset:-3px}.surface-card img{display:block;width:100%;height:90px;object-fit:cover;margin-bottom:6px;border-radius:4px}.surface-card span{display:block}
.surface-comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px}.surface-comparison figure{margin:0}.surface-comparison img{width:100%;height:95px;object-fit:contain;background:#faf8f3}.surface-comparison figcaption{font-size:12px}.surface-detail{margin:8px 0;font-size:12px}.surface-library .actions{position:sticky;bottom:-16px;background:var(--paper,#fff);padding:12px 0;display:flex;flex-wrap:wrap;gap:8px}.surface-library .btn{min-height:44px}.surface-error{color:#a32b1f;overflow-wrap:anywhere}
#surfaceQAStatus{position:absolute;bottom:60px;left:12px;right:12px;z-index:10;pointer-events:none;max-height:90px;overflow:auto;background:#fff9ed;color:#763c10;border-radius:6px;font-size:12px;padding:8px}#surfaceQAStatus:empty{display:none}
@media(max-width:600px){.surface-library{inset:auto 6px 6px 6px;width:calc(100vw - 12px);max-height:58dvh;padding:12px}.surface-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-height:19dvh}.surface-card{min-height:120px}.surface-card img{height:64px}.surface-comparison img{height:60px}.surface-library h2{font-size:17px}.surface-library .actions{bottom:-12px}}
@media(max-height:500px){.surface-library{max-height:70dvh;max-width:600px}.surface-comparison{display:none}.surface-cards{max-height:22dvh}.surface-card{min-height:110px}.surface-card img{height:55px}.surface-library p{margin:4px 0}.surface-library h2{font-size:16px}}

.surface-library .actions .btn.primary{background:#85431f;color:#fff}