.design-reference-entry { display: flex; justify-content: flex-end; }
.reference-drawer-backdrop { position: fixed; inset: 0; z-index: 89; display: none; width: 100%; height: 100%; border: 0; background: rgba(15, 23, 42, .28); }
.reference-drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; display: none; width: min(720px, 94vw); padding: 24px; overflow: auto; background: #fff; border-left: 1px solid var(--border); box-shadow: -20px 0 60px rgba(15, 23, 42, .14); }
.design-reference-entry.is-open .reference-drawer { display: grid; align-content: start; gap: 16px; }
.design-reference-entry.is-open .reference-drawer-backdrop { display: block; }
.reference-drawer-close { flex: 0 0 auto; font-size: 20px; }
.reference-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.reference-panel-heading h4, .reference-panel-heading p { margin: 0; }
.reference-panel-heading p { margin-top: 4px; }
.reference-input-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto; gap: 10px; align-items: center; }
.reference-input-row input { min-width: 0; }
.reference-status { min-height: 38px; display: flex; align-items: center; padding: 9px 12px; border: 1px solid var(--border); background: var(--surface-subtle, #f7f9fc); color: var(--muted); font-size: 13px; }
.reference-status.is-error { border-color: var(--danger, #c63f4b); color: var(--danger, #c63f4b); background: #fff7f7; }
.reference-proposal-content { display: grid; gap: 14px; }
.reference-provenance { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.reference-screenshot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 12px; }
.reference-screenshot-grid figure { margin: 0; min-width: 0; }
.reference-screenshot-grid img { display: block; width: 100%; max-height: 360px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle, #f7f9fc); }
.reference-screenshot-grid figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; }
.reference-fact-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-fact-chips span { padding: 4px 8px; border: 1px solid var(--border); background: #fff; font-size: 12px; }
.reference-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reference-candidate { border: 1px solid var(--border); background: #fff; padding: 14px; display: grid; gap: 12px; }
.reference-candidate p, .reference-candidate h5 { margin: 0; }
.reference-candidate-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.reference-candidate-head span { color: var(--muted); font-size: 12px; }
.reference-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.reference-color { display: grid; justify-items: center; gap: 3px; }
.reference-color span { width: 28px; height: 28px; background: var(--swatch); border: 1px solid rgba(15, 23, 42, .12); }
.reference-color small { max-width: 52px; overflow: hidden; text-overflow: ellipsis; }
.reference-token-summary { display: grid; grid-template-columns: 50px 1fr; gap: 5px 10px; margin: 0; font-size: 12px; }
.reference-token-summary dt { color: var(--muted); }
.reference-token-summary dd { margin: 0; }
.reference-notes { border-left: 3px solid var(--accent, #276ef1); padding: 8px 12px; background: var(--surface-subtle, #f7f9fc); }
.reference-notes h5, .reference-notes p { margin: 0; }
.reference-notes p + p { margin-top: 5px; }
.reference-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 780px) { .reference-candidate-grid, .reference-screenshot-grid { grid-template-columns: 1fr; } .reference-input-row { grid-template-columns: 1fr; } .reference-provenance { display: grid; } }