.photo-gallery{width:100%;padding:2rem 1rem;max-width:100%}.photo-gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem}.photo-gallery-header h1{font-size:2rem;font-weight:600;margin:0}.photo-gallery-upload-btn{padding:.5rem 1rem;background-color:var(--color-primary, #007bff);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.95rem;white-space:nowrap}.photo-gallery-upload-btn:hover{background-color:var(--color-primary-dark, #0056b3)}.photo-gallery-loading,.photo-gallery-error{padding:2rem;text-align:center;font-size:1.1rem}.photo-gallery-error{color:var(--color-error, #dc3545)}.photo-gallery-empty{padding:3rem 2rem;text-align:center;color:#666}.photo-gallery-empty p{font-size:1.2rem;margin-bottom:1.5rem}.photo-gallery-cta-btn{padding:.75rem 1.5rem;background-color:var(--color-primary, #007bff);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.photo-grid-container{width:100%}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;width:100%}.photo-grid-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s;cursor:pointer}.photo-grid-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.photo-grid-image-wrapper{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background-color:#f5f5f5}.photo-grid-image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}.photo-grid-image.loaded{opacity:1}.photo-grid-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.photo-grid-info{padding:.75rem}.photo-grid-meta{display:flex;justify-content:space-between;font-size:.85rem;color:#666}.photo-grid-uploader{font-weight:500}.photo-grid-date{color:#999}.photo-lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.photo-lightbox{display:grid;grid-template-columns:1fr 300px;grid-template-rows:auto 1fr auto;width:100%;max-width:1400px;height:90vh;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 32px #0000004d}@media(max-width:768px){.photo-lightbox{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;height:auto;max-height:95vh}}.photo-lightbox-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #eee;background:#f9f9f9}.photo-lightbox-meta{display:flex;gap:1rem;font-size:.9rem;color:#666}.photo-lightbox-counter{font-weight:600;color:#333}.photo-lightbox-controls{display:flex;gap:.5rem}.photo-lightbox-delete-btn,.photo-lightbox-close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;color:#666}.photo-lightbox-delete-btn:hover,.photo-lightbox-close-btn:hover{color:#000}.photo-lightbox-image-container{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;background:#f9f9f9;position:relative;overflow:hidden}.photo-lightbox-image{max-width:100%;max-height:100%;object-fit:contain;display:block}.photo-lightbox-navigation{grid-column:1;grid-row:2;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;pointer-events:none}.photo-lightbox-nav-btn{pointer-events:all;background:#0000004d;color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.photo-lightbox-nav-btn:hover{background:#00000080}.photo-lightbox-delete-confirm{grid-column:1;grid-row:3;background:#fff3cd;padding:1rem;border-top:1px solid #ffc107;display:flex;justify-content:space-between;align-items:center}.photo-lightbox-delete-confirm p{margin:0;color:#856404}.photo-lightbox-delete-actions{display:flex;gap:.5rem}.btn-secondary,.btn-danger{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}.btn-primary{background-color:#007bff;color:#fff;padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.btn-primary:hover{background-color:#0056b3}.photo-lightbox-sidebar{grid-column:2;grid-row:2 / -1;border-left:1px solid #eee;background:#fff;display:flex;flex-direction:column;overflow:hidden}@media(max-width:768px){.photo-lightbox-sidebar{grid-column:1;grid-row:4;border-left:none;border-top:1px solid #eee}}.photo-comments{display:flex;flex-direction:column;height:100%}.photo-comments-header{padding:1rem;border-bottom:1px solid #eee}.photo-comments-header h3{margin:0;font-size:.95rem}.photo-comments-reactions-bar{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #eee;flex-wrap:wrap}.photo-comment-reaction-btn{background:#f5f5f5;border:2px solid transparent;padding:.25rem .5rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:.25rem;font-size:1.2rem;transition:background .2s,border-color .2s}.photo-comment-reaction-btn:hover{background:#efefef}.photo-comment-reaction-btn.active{background:#e3f2fd;border-color:#007bff}.emoji{display:block;line-height:1}.count{font-size:.7rem;font-weight:600;color:#666}.photo-comments-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.photo-comments-empty{color:#999;text-align:center;font-size:.9rem}.photo-comment-item{background:#f9f9f9;padding:.75rem;border-radius:4px}.photo-comment-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.85rem}.photo-comment-author{font-weight:600}.photo-comment-date{color:#999}.photo-comment-body{margin:0;font-size:.9rem;word-wrap:break-word}.photo-comments-form{padding:1rem;border-top:1px solid #eee;display:flex;flex-direction:column;gap:.5rem}.photo-comments-input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem;resize:vertical;min-height:60px;font-family:inherit}.photo-comments-input:focus{outline:none;border-color:#007bff}.photo-comments-submit{align-self:flex-end;padding:.4rem .8rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem}.photo-comments-submit:hover:not(:disabled){background-color:#0056b3}.photo-comments-submit:disabled{opacity:.5;cursor:not-allowed}.photo-comments-join-prompt{padding:1rem;text-align:center;font-size:.9rem;color:#666}.photo-comments-join-prompt a{color:#007bff;text-decoration:none}.photo-upload-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem}.photo-upload-modal{background:#fff;border-radius:8px;width:100%;max-width:500px;box-shadow:0 4px 20px #00000026}.photo-upload-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #eee}.photo-upload-header h2{margin:0;font-size:1.3rem}.photo-upload-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666}.photo-upload-close:hover{color:#000}.photo-upload-zone{padding:2rem;border:2px dashed #ddd;border-radius:4px;margin:1.5rem;text-align:center;transition:border-color .2s,background .2s}.photo-upload-zone.active{border-color:#007bff;background-color:#f0f7ff}.photo-upload-icon{font-size:3rem;margin-bottom:1rem}.photo-upload-text{color:#666;margin:1rem 0}.photo-upload-browse{padding:.75rem 1.5rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.photo-upload-browse:hover{background-color:#0056b3}.photo-upload-list{display:flex;flex-direction:column;gap:.75rem}.photo-upload-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#f9f9f9;border-radius:4px}.photo-upload-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.photo-upload-progress{flex:2;height:6px;background-color:#e0e0e0;border-radius:3px;overflow:hidden}.photo-upload-progress-bar{height:100%;background-color:#4caf50;transition:width .2s}.photo-upload-status{width:20px;text-align:right;font-size:.9rem}.photo-upload-item.status-success .photo-upload-status{color:#4caf50}.photo-upload-item.status-error .photo-upload-status{color:#dc3545}.photo-upload-footer{padding:1.5rem;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.photo-upload-success{margin:0;color:#4caf50;font-weight:500}@media(max-width:768px){.photo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.photo-gallery-header{flex-direction:column;align-items:stretch}.photo-gallery-header h1{font-size:1.5rem}.photo-gallery-upload-btn{width:100%}.photo-lightbox-overlay{padding:0}.photo-lightbox{height:100vh;border-radius:0}}@media(max-width:480px){.photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}.photo-lightbox-header{flex-direction:column;gap:.5rem;align-items:flex-start}.photo-lightbox-controls{align-self:flex-end}.photo-upload-modal{margin:0 1rem}}