.photo-panel { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.photo-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.photo-heading h3 { font-weight:800; color:var(--ink); }
.photo-context,.photo-help,.photo-status { color:var(--muted); font-size:13px; margin-top:6px; }
.photo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.photo-button { padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:#fbf8f3; color:var(--ink); font-size:13px; font-weight:700; }
.photo-button.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.photo-button:disabled { opacity:.5; cursor:not-allowed; }
.photo-button:focus-visible,.photo-preview:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
.photo-caption { display:block; margin-top:16px; font-size:13px; font-weight:700; }
.photo-caption input { display:block; width:100%; margin-top:6px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-weight:400; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-top:16px; }
.photo-card { min-width:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fbfaf7; }
.photo-preview { display:block; width:100%; aspect-ratio:4/3; background:#eae4dc; }
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-card figcaption { padding:10px; overflow-wrap:anywhere; font-size:13px; color:var(--ink); }
.photo-card time { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.photo-card .photo-button { margin:0 10px 10px; padding:5px 9px; }
.photo-status[data-error="true"] { color:#a13e30; }
.photo-dialog { width:min(720px,calc(100% - 28px)); max-height:90vh; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fbf8f3; color:var(--ink); }
.photo-dialog::backdrop { background:rgba(23,35,33,.78); }
.photo-dialog h3 { font-weight:800; margin-bottom:12px; }
.photo-dialog video,.photo-dialog img { width:100%; max-height:65vh; object-fit:contain; background:#202b29; border-radius:8px; }
.photo-dialog .photo-actions { margin-top:14px; }
.photo-dialog [hidden] { display:none!important; }
.photo-skeleton { aspect-ratio:4/3; border-radius:10px; background:#eee8df; }
@media(max-width:480px) { .photo-panel { padding:15px; } .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }