dialog { color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:0; border-radius:var(--radius-panel); max-width:calc(100% - var(--s8)); max-height:calc(100dvh - var(--s8)); box-shadow:var(--shadow); width:1100px; overscroll-behavior:contain; }
dialog::backdrop { background:var(--overlay); }
dialog[open] { animation:dialog-in var(--motion-standard) var(--ease); }
@keyframes dialog-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5) var(--s6); }
.dialog-header h2 { font-size:var(--text-lg); font-weight:500; }
.viewer-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:var(--s8); padding:0 var(--s6) var(--s6); align-items:center; }
.viewer-image-wrap { border-radius:var(--radius-card); overflow:hidden; background:var(--surface-soft); position:relative; }
.viewer-image { width:100%; height:auto; max-height:calc(100dvh - 160px); object-fit:contain; touch-action:pan-y pinch-zoom; }
.viewer-info h3 { font-size:var(--text-xl); font-weight:500; line-height:1.5; text-wrap:pretty; }
.viewer-tags { display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 var(--s6); }
.viewer-tags span { font-size:var(--text-sm); border-radius:var(--radius-pill); padding:var(--s2) var(--s3); background:var(--surface-soft); color:var(--muted); }
.viewer-navigation { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-top:var(--s6); margin-top:var(--s6); border-top:1px solid var(--line); }
.viewer-counter { color:var(--muted); font-size:var(--text-sm); }
.viewer-hint { margin-top:var(--s5); color:var(--muted); font-size:var(--text-sm); }