#photoPage .photo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#photoPage .photo-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
#photoPage .photo-search { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#photoPage .photo-upload-panel { border:1px solid #e5e7eb; border-radius:8px; padding:14px; background:#fff; }
#photoPage .photo-upload-entry { display:flex; justify-content:flex-end; }
body.photo-upload-open { overflow:hidden; }
#photoPage .photo-upload-sheet[hidden] { display:none; }
#photoPage .photo-upload-sheet { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:18px; }
#photoPage .photo-upload-dim { position:absolute; inset:0; background:rgba(15,23,42,.58); }
#photoPage .photo-upload-dialog { position:relative; z-index:1; width:min(640px, 100%); max-height:86vh; display:flex; flex-direction:column; border-radius:10px; background:#fff; box-shadow:0 18px 60px rgba(15,23,42,.32); overflow:hidden; }
#photoPage .photo-upload-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
#photoPage .photo-upload-title { font-weight:700; font-size:1rem; }
#photoPage .photo-upload-limit { display:inline-flex; margin-top:7px; padding:5px 8px; border:1px solid #f59e0b; border-radius:6px; background:#fffbeb; color:#dc2626; font-size:.82rem; font-weight:700; line-height:1.35; }
#photoPage .photo-upload-body { padding:14px 16px 16px; overflow:auto; }
#photoPage .photo-upload-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#photoPage .photo-upload-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#photoPage .photo-upload-message { min-height:20px; margin-top:10px; color:#6b7280; font-size:.86rem; }
#photoPage .photo-upload-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
#photoPage .photo-upload-item { display:grid; grid-template-columns:64px minmax(0, 1fr); gap:8px 10px; align-items:center; padding:9px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; }
#photoPage .photo-upload-preview { width:64px; height:64px; grid-row:1 / 5; border-radius:6px; object-fit:cover; background:#e5e7eb; }
#photoPage .photo-upload-info { min-width:0; }
#photoPage .photo-upload-line { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
#photoPage .photo-upload-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:.88rem; }
#photoPage .photo-upload-status { font-size:.8rem; color:#6b7280; white-space:nowrap; }
#photoPage .photo-upload-title-input { grid-column:2; }
#photoPage .photo-upload-tags-input { grid-column:2; }
#photoPage .photo-upload-item.is-uploading { border-color:#93c5fd; background:#eff6ff; }
#photoPage .photo-upload-item.is-done { border-color:#86efac; background:#f0fdf4; }
#photoPage .photo-upload-item.is-error { border-color:#fecaca; background:#fef2f2; }
#photoPage .photo-upload-progress { grid-column:2; height:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
#photoPage .photo-upload-progress span { display:block; width:0; height:100%; background:#2563eb; transition:width .16s ease; }
#photoPage .photo-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
#photoPage .photo-card { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; background:#fff; min-width:0; }
#photoPage .photo-open { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
#photoPage .photo-thumb { display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; background:#f3f4f6; }
#photoPage .photo-card-body { padding:10px; }
#photoPage .photo-title { font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#photoPage .photo-tags { margin-top:5px; color:#2563eb; font-size:.8rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#photoPage mark.photo-highlight { background:#ffdf3d; color:inherit; padding:0; border-radius:2px; }
#photoPage .photo-meta { margin-top:4px; color:#6b7280; font-size:.82rem; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#photoPage .photo-actions { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
#photoPage .photo-edit-form { display:none; gap:6px; margin-top:9px; flex-wrap:wrap; }
#photoPage .photo-card.is-editing .photo-edit-form { display:flex; }
#photoPage .photo-edit-form input[name="title"], #photoPage .photo-edit-form input[name="tags"] { flex:1 0 100%; }
#photoPage .photo-badge { display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:.76rem; }
#photoPage .photo-badge.private { background:#f3f4f6; color:#4b5563; }
#photoPage .photo-lightbox[hidden] { display:none; }
#photoPage .photo-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:54px 64px 28px; }
#photoPage .photo-lightbox-close { position:absolute; top:12px; right:14px; z-index:2; border:0; border-radius:6px; background:rgba(255,255,255,.14); color:#fff; padding:8px 11px; }
#photoPage .photo-lightbox-center { position:relative; min-width:0; text-align:center; color:#fff; }
#photoPage .photo-lightbox-image { max-width:100%; max-height:78vh; object-fit:contain; }
#photoPage .photo-lightbox-title { margin-top:10px; font-weight:700; }
#photoPage .photo-lightbox-count { margin-top:4px; color:#d1d5db; font-size:.86rem; }
#photoPage .photo-lightbox-arrow { display:flex; position:absolute; top:50%; transform:translateY(-50%); width:46px; height:64px; align-items:center; justify-content:center; border:0; border-radius:8px; color:#fff; background:rgba(0,0,0,.42); font-size:42px; line-height:1; }
#photoPage .photo-lightbox-arrow.prev { left:8px; }
#photoPage .photo-lightbox-arrow.next { right:8px; }

@media (max-width: 991px) {
  #photoPage .photo-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  #photoPage .photo-upload-entry { justify-content:stretch; }
  #photoPage .photo-upload-entry .btn { width:100%; }
  #photoPage .photo-upload-sheet { align-items:flex-end; padding:0; }
  #photoPage .photo-upload-dialog { width:100%; max-height:88vh; border-radius:14px 14px 0 0; }
  #photoPage .photo-upload-head { padding:13px 14px; }
  #photoPage .photo-upload-body { padding:13px 14px 18px; }
  #photoPage .photo-upload-controls .btn, #photoPage .photo-upload-controls .form-check { min-height:38px; display:inline-flex; align-items:center; }
  #photoPage .photo-upload-controls [data-photo-upload-start] { width:100%; margin-left:0 !important; }
  #photoPage .photo-upload-item { grid-template-columns:58px minmax(0, 1fr); }
  #photoPage .photo-upload-preview { width:58px; height:58px; }
  #photoPage .photo-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  #photoPage .photo-card-body { padding:8px; }
  #photoPage .photo-meta .photo-owner, #photoPage .photo-meta .photo-size { display:none; }
  #photoPage .photo-lightbox { padding:44px 44px 32px; }
  #photoPage .photo-lightbox-image { max-width:100%; max-height:74vh; }
  #photoPage .photo-lightbox-arrow { width:38px; height:54px; border-radius:6px; font-size:34px; }
  #photoPage .photo-lightbox-arrow.prev { left:4px; }
  #photoPage .photo-lightbox-arrow.next { right:4px; }
}