@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg: #ffffff;--text: #1a1a1a;--text-secondary: #737373;--border: #e5e5e5;--border-hover: #a3a3a3;--accent: #171717;--danger: #ef4444}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}.app{max-width:1200px;margin:0 auto;padding:0 24px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:48px 0;margin-bottom:48px;border-bottom:1px solid var(--border)}.header-content{display:flex;align-items:center;gap:16px}.logo{color:var(--text);display:flex;align-items:center;justify-content:center}.app-header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}.subtitle{font-size:.875rem;color:var(--text-secondary);font-weight:400;margin-top:2px}.image-count{font-size:.875rem;color:var(--text-secondary);font-feature-settings:"tnum";font-weight:500}.upload-zone{border:1px dashed var(--border);padding:64px 24px;text-align:center;cursor:pointer;transition:all .2s ease;margin-bottom:80px;background:transparent}.upload-zone:hover,.upload-zone.drag-over{background:#fafafa;border-color:var(--border-hover)}.upload-icon{color:var(--text-secondary);margin-bottom:16px;opacity:.5}.upload-text{color:var(--text-secondary);font-size:.875rem;margin-bottom:24px}.upload-input{display:none}.upload-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:10px 20px;font-size:.875rem;font-weight:500;border:none;border-radius:4px;cursor:pointer;transition:opacity .2s}.upload-btn:hover{opacity:.9}.upload-btn.disabled{opacity:.5;cursor:not-allowed}.upload-error{color:var(--danger);font-size:.875rem;margin-top:16px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:48px 32px;padding-bottom:80px}.image-card{position:relative;group:hover}.image-wrapper{aspect-ratio:4 / 3;background:#f5f5f5;overflow:hidden;margin-bottom:12px}.image-wrapper img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}.image-overlay{position:absolute;top:12px;right:12px;opacity:0;transition:opacity .2s}.image-card:hover .image-overlay{opacity:1}.delete-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:50%;color:var(--text);cursor:pointer;box-shadow:0 2px 8px #0000000d;transition:all .2s}.delete-btn:hover{border-color:var(--danger);color:var(--danger);transform:scale(1.05)}.image-meta{padding-top:4px}.image-date{font-size:.75rem;color:var(--text-secondary);letter-spacing:.02em}.empty-state,.loading-state{text-align:center;padding:80px 0;color:var(--text-secondary)}.empty-icon{margin-bottom:16px;opacity:.2}.empty-state h3{font-size:1rem;font-weight:500;color:var(--text);margin-bottom:4px}.empty-state p{font-size:.875rem}.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}.spinner-small{width:14px;height:14px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}.error-banner{background:#fef2f2;color:var(--danger);padding:12px 16px;font-size:.875rem;margin-bottom:32px;display:flex;align-items:center;gap:12px;border:1px solid #fee2e2;border-radius:4px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.app-header{flex-direction:column;align-items:flex-start;gap:16px;padding:32px 0}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100%,1fr));gap:32px}}