/* Shared Design and Preview dialogs. Image mats stay neutral to show the original artwork. */
:is(.dd-shell, .pd-shell) { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:1.1rem; }
.dd-shell { margin-bottom:1rem; }
:is(.dd-col, .pd-col) { display:flex; flex-direction:column; gap:.9rem; min-width:0; }
:is(.dd-hero, .pd-hero) { display:grid; place-items:center; overflow:hidden; border-radius:.85rem; background:var(--panel-artwork-mat); border:1px solid rgba(var(--panel-border-rgb),.10); padding:.85rem; min-height:280px; }
:is(.dd-hero, .pd-hero) img { display:block; max-width:100%; max-height:54vh; width:auto; height:auto; object-fit:contain; }
:is(.dd-meta, .pd-meta) { display:grid; gap:.7rem; margin:0; padding:.95rem; border:1px solid rgba(var(--panel-border-rgb),.10); border-radius:.7rem; background:var(--panel-inset); }
:is(.dd-meta-row, .pd-meta-row) { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:baseline; gap:.5rem; min-width:0; }
.pd-meta-row { grid-template-columns:96px minmax(0,1fr); }
:is(.dd-meta, .pd-meta) dt { margin:0; font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--panel-muted); }
:is(.dd-meta, .pd-meta) dd { margin:0; font-size:.86rem; font-weight:700; color:var(--panel-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; }
:is(.dd-field-label, .pd-field-label) { font-size:.7rem; font-weight:650; color:var(--panel-muted); letter-spacing:.04em; text-transform:uppercase; }
:is(.dd-url-row, .pd-url-row) { display:flex; gap:.4rem; align-items:stretch; }
:is(.dd-url-input, .pd-url-input) { flex:1 1 auto; min-width:0; padding:.55rem .7rem; font-size:.78rem; font-family:ui-monospace,SFMono-Regular,monospace; color:var(--panel-ink); background:var(--panel-surface); border:1px solid rgba(var(--panel-border-rgb),.14); border-radius:.5rem; outline:none; }
:is(.dd-url-input, .pd-url-input):focus { border-color:var(--panel-link); box-shadow:0 0 0 2px rgba(var(--panel-link-rgb),.18); }
:is(.dd-copy, .pd-copy) { flex:0 0 auto; min-width:2.4rem; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.5rem .7rem; font-size:.78rem; font-weight:700; color:var(--panel-ink); background:var(--panel-surface); border:1px solid rgba(var(--panel-border-rgb),.14); border-radius:.5rem; cursor:pointer; transition:background .15s,border-color .15s; }
:is(.dd-copy, .pd-copy):hover { background:var(--panel-hover); border-color:rgba(var(--panel-border-rgb),.22); }
:is(.dd-copy, .pd-copy).is-copied { color:#15803d; border-color:rgba(22,163,74,.55); background:rgba(22,163,74,.08); }
html.dark :is(.dd-copy, .pd-copy).is-copied { color:#86efac; }
:is(.dd-copy, .pd-copy) svg { width:.95rem; height:.95rem; }
:is(.dd-actions, .pd-actions) { display:flex; flex-direction:column; gap:.5rem; }
:is(.dd-btn, .pd-btn) { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .9rem; border-radius:.55rem; font-size:.82rem; font-weight:700; line-height:1; cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,opacity .15s; border:1px solid rgba(var(--panel-border-rgb),.14); background:var(--panel-surface); color:var(--panel-ink); }
:is(.dd-btn, .pd-btn):hover { background:var(--panel-hover); }
:is(.dd-btn-primary, .pd-btn-primary) { border-color:var(--panel-primary); background:var(--panel-primary); color:var(--panel-on-primary); }
:is(.dd-btn-primary, .pd-btn-primary):hover { border-color:var(--panel-primary-hover); background:var(--panel-primary-hover); }
:is(.dd-btn, .pd-btn) svg { width:1rem; height:1rem; }
:is(.dd-btn, .pd-btn, .dd-copy, .pd-copy, .pd-tile):focus-visible { outline:2px solid var(--panel-link); outline-offset:3px; }
.pd-btn[disabled], .pd-btn.is-loading { opacity:.78; cursor:wait; }
.pd-spinner { width:1rem; height:1rem; border-radius:999px; border:2px solid currentColor; border-top-color:transparent; animation:pd-spin .65s linear infinite; }
@keyframes pd-spin { to { transform:rotate(360deg); } }
.pd-gal-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.pd-gal-title { margin:0; font-size:.82rem; font-weight:750; color:var(--panel-ink); }
.pd-gal-count { font-size:.72rem; color:var(--panel-muted); }
.pd-gal { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; }
.pd-tile { display:block; padding:0; cursor:pointer; overflow:hidden; border-radius:.5rem; background:var(--panel-surface); border:1px solid rgba(var(--panel-border-rgb),.10); text-align:left; transition:border-color .15s,transform .15s,box-shadow .15s; }
.pd-tile:hover { border-color:var(--panel-link); transform:translateY(-1px); }
.pd-tile.is-active { border-color:var(--panel-link); box-shadow:0 0 0 1px rgba(var(--panel-link-rgb),.55); }
.pd-tile-thumb { aspect-ratio:1/1; display:grid; place-items:center; background:var(--panel-artwork-mat); }
.pd-tile-thumb img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pd-tile-name { padding:.28rem .4rem; font-size:.66rem; font-weight:650; color:var(--panel-ink); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1100px) { .pd-gal { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:880px) { .pd-shell { grid-template-columns:1fr; } .pd-gal { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:820px) { .dd-shell { grid-template-columns:1fr; } }
@media (max-width:520px) { .pd-gal { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .pd-tile { transition:none; } .pd-tile:hover { transform:none; } }