.image-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.image-modal-overlay .image-modal-content{width:100%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp 0.3s ease-out}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.image-modal-overlay .image-modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-bottom:16px}.image-modal-overlay .image-modal-content .modal-header .modal-info h3{margin:0;color:white;font-size:18px;font-weight:600}.image-modal-overlay .image-modal-content .modal-header .modal-info span{color:rgba(255,255,255,0.7);font-size:14px}.image-modal-overlay .image-modal-content .modal-header .modal-actions{display:flex;gap:12px}.image-modal-overlay .image-modal-content .modal-header .modal-actions .modal-btn{width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}.image-modal-overlay .image-modal-content .modal-header .modal-actions .modal-btn:hover{background:rgba(255,255,255,0.2)}.image-modal-overlay .image-modal-content .modal-header .modal-actions .modal-btn.download-btn:hover{background:#007aff}.image-modal-overlay .image-modal-content .modal-header .modal-actions .modal-btn.close-btn:hover{background:#ff3b30}.image-modal-overlay .image-modal-content .modal-image-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative}.image-modal-overlay .image-modal-content .modal-image-container .loading-spinner{display:flex;flex-direction:column;align-items:center;gap:16px;color:white}.image-modal-overlay .image-modal-content .modal-image-container .loading-spinner .spinner{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.image-modal-overlay .image-modal-content .modal-image-container .loading-spinner p{margin:0;font-size:14px;opacity:0.8}.image-modal-overlay .image-modal-content .modal-image-container .modal-image{max-width:100%;max-height:calc(90vh - 100px);object-fit:contain;border-radius:8px;transition:opacity 0.3s ease}.image-modal-overlay .image-modal-content .modal-image-container .modal-image.loading{opacity:0;display:none}.image-modal-overlay .image-modal-content .modal-image-container .modal-image.loaded{opacity:1;animation:fadeIn 0.3s ease}

.image-gallery{width:100%;padding:12px;background:#f5f5f7;min-height:100vh}@media (min-width: 768px){.image-gallery{padding:20px}}.image-gallery .gallery-header{position:sticky;top:0;z-index:100;background:rgba(245,245,247,0.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);margin:-12px -12px 16px -12px;padding:12px 16px;border-bottom:0.5px solid rgba(0,0,0,0.1)}@media (min-width: 768px){.image-gallery .gallery-header{position:relative;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0 0 24px 0;padding:0 8px;border-bottom:none}}.image-gallery .gallery-header .gallery-title-row{display:flex;align-items:center;gap:12px;width:100%;flex-wrap:wrap}@media (min-width: 768px){.image-gallery .gallery-header .gallery-title-row{flex-wrap:nowrap}}.image-gallery .gallery-header .gallery-title{flex:1;min-width:0}.image-gallery .gallery-header .gallery-title h2{margin:0 0 2px 0;font-size:22px;font-weight:700;color:#1d1d1f;letter-spacing:-0.5px}@media (min-width: 768px){.image-gallery .gallery-header .gallery-title h2{font-size:28px;font-weight:600;margin-bottom:4px}}.image-gallery .gallery-header .gallery-title .image-count{font-size:13px;color:#86868b;font-weight:400}@media (min-width: 768px){.image-gallery .gallery-header .gallery-title .image-count{font-size:14px}}.image-gallery .gallery-header .gallery-title .image-count .page-info{color:#007aff;font-weight:500}.image-gallery .gallery-header .source-selector{margin-left:auto}.image-gallery .gallery-header .source-selector select{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.1);background:white;font-size:13px;font-weight:500;color:#1d1d1f;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%231d1d1f%27 d=%27M6 8L2 4h8z%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}@media (min-width: 768px){.image-gallery .gallery-header .source-selector select{padding:8px 12px;padding-right:32px;font-size:14px}}.image-gallery .gallery-header .gallery-actions{display:none;gap:12px;align-items:center;width:100%;margin-top:12px}@media (min-width: 768px){.image-gallery .gallery-header .gallery-actions{display:flex;width:auto;margin-top:0}}.image-gallery .gallery-header .gallery-actions button{padding:8px 16px;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;min-height:44px;flex:1}@media (min-width: 768px){.image-gallery .gallery-header .gallery-actions button{padding:10px 20px;font-size:14px;font-weight:500;border-radius:8px;min-height:auto;flex:none}}.image-gallery .gallery-header .gallery-actions button svg{width:18px;height:18px}@media (min-width: 768px){.image-gallery .gallery-header .gallery-actions button svg{width:16px;height:16px}}.image-gallery .gallery-header .gallery-actions button.btn-primary{background:#007aff;color:white;box-shadow:0 2px 8px rgba(0,122,255,0.25)}.image-gallery .gallery-header .gallery-actions button.btn-primary:hover:not(:disabled){background:#0051d5;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,122,255,0.35)}.image-gallery .gallery-header .gallery-actions button.btn-primary:active:not(:disabled){transform:scale(0.98)}.image-gallery .gallery-header .gallery-actions button.btn-primary:disabled{opacity:0.5;cursor:not-allowed}.image-gallery .gallery-header .gallery-actions button.btn-secondary{background:rgba(0,0,0,0.06);color:#1d1d1f}.image-gallery .gallery-header .gallery-actions button.btn-secondary:hover{background:rgba(0,0,0,0.1)}.image-gallery .gallery-header .gallery-actions button.btn-secondary:active{transform:scale(0.98)}.image-gallery .gallery-header .gallery-actions button.btn-cancel{background:transparent;color:#86868b;flex:0.5}.image-gallery .gallery-header .gallery-actions button.btn-cancel:hover{color:#1d1d1f;background:rgba(0,0,0,0.04)}.image-gallery .mobile-action-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:0.5px solid rgba(0,0,0,0.1);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(0,0,0,0.05);display:flex;gap:8px}@media (min-width: 768px){.image-gallery .mobile-action-bar{display:none}}.image-gallery .mobile-action-bar button{padding:12px 20px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;min-height:48px;flex:1}.image-gallery .mobile-action-bar button svg{width:20px;height:20px}.image-gallery .mobile-action-bar button.btn-primary{background:#007aff;color:white;box-shadow:0 2px 8px rgba(0,122,255,0.3)}.image-gallery .mobile-action-bar button.btn-primary:active:not(:disabled){transform:scale(0.96)}.image-gallery .mobile-action-bar button.btn-primary:disabled{opacity:0.5;cursor:not-allowed}.image-gallery .mobile-action-bar button.btn-secondary{background:rgba(0,0,0,0.06);color:#1d1d1f}.image-gallery .mobile-action-bar button.btn-secondary:active{transform:scale(0.96)}.image-gallery .mobile-action-bar button.btn-cancel{background:transparent;color:#ff3b30;flex:0.6}.image-gallery .mobile-action-bar button.btn-cancel:active{transform:scale(0.96)}.image-gallery .gallery-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2px;padding:0;margin-bottom:80px}@media (min-width: 640px){.image-gallery .gallery-grid{grid-template-columns:repeat(4, 1fr);gap:3px}}@media (min-width: 768px){.image-gallery .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:4px;margin-bottom:0}}@media (min-width: 1024px){.image-gallery .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:6px}}@media (min-width: 1200px){.image-gallery .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:8px}}.image-gallery .gallery-grid .gallery-item{position:relative;aspect-ratio:1;overflow:hidden;border-radius:0;cursor:pointer;background:#e5e5e7;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);-webkit-tap-highlight-color:transparent}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item{border-radius:8px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}}.image-gallery .gallery-grid .gallery-item:active{opacity:0.9;transform:scale(0.98)}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item:hover{transform:scale(1.02);z-index:10;box-shadow:0 8px 24px rgba(0,0,0,0.15)}.image-gallery .gallery-grid .gallery-item:hover .image-overlay{opacity:1}.image-gallery .gallery-grid .gallery-item:active{opacity:1;transform:scale(1)}}.image-gallery .gallery-grid .gallery-item.selected{outline:3px solid #007aff;outline-offset:-3px}.image-gallery .gallery-grid .gallery-item.selected .selection-checkbox{opacity:1;background:#007aff;transform:scale(1)}.image-gallery .gallery-grid .gallery-item .gallery-thumbnail{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .gallery-thumbnail{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item:hover .gallery-thumbnail{transform:scale(1.05)}}.image-gallery .gallery-grid .gallery-item .selection-checkbox{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.9);border:2px solid #007aff;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;opacity:0;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2;transform:scale(0.8);pointer-events:auto}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .selection-checkbox{top:8px;right:8px;width:28px;height:28px;border-radius:6px;background:rgba(0,0,0,0.4);border:none}}.image-gallery .gallery-grid .gallery-item .selection-checkbox svg{width:16px;height:16px}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .selection-checkbox svg{width:18px;height:18px}}.image-gallery .gallery-grid .gallery-item.selected .selection-checkbox,.image-gallery .gallery-grid .gallery-item:hover .selection-checkbox{opacity:1;transform:scale(1)}.image-gallery .gallery-grid .gallery-item .image-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);padding:8px;opacity:0;transition:opacity 0.3s;z-index:1;display:none}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .image-overlay{display:block;padding:12px}}.image-gallery .gallery-grid .gallery-item .image-overlay .image-name{display:block;color:white;font-size:12px;font-weight:500;margin-bottom:2px;text-shadow:0 1px 2px rgba(0,0,0,0.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .image-overlay .image-name{font-size:13px;margin-bottom:4px}}.image-gallery .gallery-grid .gallery-item .image-overlay .image-size{display:block;color:rgba(255,255,255,0.8);font-size:10px;text-shadow:0 1px 2px rgba(0,0,0,0.5)}@media (min-width: 768px){.image-gallery .gallery-grid .gallery-item .image-overlay .image-size{font-size:11px}}@media (max-width: 767px){.image-gallery .gallery-grid.selection-mode .gallery-item .selection-checkbox{opacity:1 !important;transform:scale(1) !important}}.image-gallery .loading-more{text-align:center;padding:24px 20px;margin-bottom:60px}@media (min-width: 768px){.image-gallery .loading-more{margin-bottom:0}}.image-gallery .loading-more .spinner{animation:spin 1s linear infinite;color:#007aff;margin-bottom:8px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.image-gallery .loading-more p{margin:0;font-size:14px;color:#86868b;font-weight:500}.image-gallery-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;padding:40px 20px}.image-gallery-loading .spinner{animation:spin 1s linear infinite;color:#007aff}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.image-gallery-loading p{margin:0;font-size:15px;color:#1d1d1f;font-weight:600}@media (min-width: 768px){.image-gallery-loading p{font-size:16px;font-weight:500}}.image-gallery-loading small{color:#86868b;font-size:13px;margin-top:4px}@media (min-width: 768px){.image-gallery-loading small{font-size:14px;margin-top:8px}}.image-gallery-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;padding:40px 20px;text-align:center}.image-gallery-error svg{color:#ff3b30}.image-gallery-error h3{margin:0;color:#1d1d1f;font-size:20px;font-weight:700}@media (min-width: 768px){.image-gallery-error h3{font-size:24px;font-weight:600}}.image-gallery-error p{color:#86868b;font-size:14px;max-width:400px;margin:0;line-height:1.5}@media (min-width: 768px){.image-gallery-error p{font-size:16px;max-width:500px}}.image-gallery-error .error-actions{margin-top:8px}.image-gallery-error .error-actions button{padding:12px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;background:#007aff;color:white;transition:all 0.2s;min-height:48px}@media (min-width: 768px){.image-gallery-error .error-actions button{border-radius:8px;font-size:14px;font-weight:500;min-height:auto}}.image-gallery-error .error-actions button:active{transform:scale(0.96)}@media (min-width: 768px){.image-gallery-error .error-actions button:hover{background:#0051d5;transform:translateY(-2px)}.image-gallery-error .error-actions button:active{transform:translateY(0)}}.image-gallery-error .error-tips{margin-top:16px;padding:16px;background:rgba(0,0,0,0.02);border-radius:12px;max-width:350px}@media (min-width: 768px){.image-gallery-error .error-tips{margin-top:20px;padding:20px;max-width:400px}}.image-gallery-error .error-tips h4{margin:0 0 10px 0;color:#1d1d1f;font-size:15px;font-weight:600}@media (min-width: 768px){.image-gallery-error .error-tips h4{margin-bottom:12px;font-size:16px}}.image-gallery-error .error-tips ul{margin:0;padding-left:20px;text-align:left}.image-gallery-error .error-tips ul li{color:#86868b;font-size:13px;margin-bottom:6px;line-height:1.4}@media (min-width: 768px){.image-gallery-error .error-tips ul li{font-size:14px;margin-bottom:8px}}.image-gallery-error .error-tips ul li:last-child{margin-bottom:0}.image-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;padding:40px 20px}.image-gallery-empty p{margin:0;font-size:15px;color:#86868b}@media (min-width: 768px){.image-gallery-empty p{font-size:16px}}.image-gallery-empty button{padding:12px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;background:#007aff;color:white;transition:all 0.2s;min-height:48px}@media (min-width: 768px){.image-gallery-empty button{border-radius:8px;font-size:14px;font-weight:500;min-height:auto}}.image-gallery-empty button:active{transform:scale(0.96)}@media (min-width: 768px){.image-gallery-empty button:hover{background:#0051d5;transform:translateY(-2px)}.image-gallery-empty button:active{transform:translateY(0)}}