body { font-family: 'Inter', -apple-system, sans-serif; background-color: #F9FAFB; -webkit-tap-highlight-color: transparent; }
.photo-contain { object-fit: contain; background-color: #f3f4f6; }
.selected-card { box-shadow: 0 0 0 4px #ef4444, 0 10px 15px -3px rgba(239, 68, 68, 0.2) !important; transform: translateY(-2px); }
.annotation-dot { width: 32px; height: 32px; background: rgba(239, 68, 68, 0.95); color: white; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); border: 2px solid white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; cursor: move; box-shadow: 0 4px 6px rgba(0,0,0,0.3); touch-action: none; z-index: 10; pointer-events: auto !important; transition: transform 0.1s; }
.annotation-dot.dragging { transform: translate(-50%, -50%) scale(1.3); background: #ff0000; box-shadow: 0 10px 15px rgba(0,0,0,0.4); }
.annotation-marker { position: absolute; width: 24px; height: 24px; background-color: rgba(239, 68, 68, 0.9); border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; font-weight: bold; pointer-events: none; z-index: 10; }
#dots-layer, #detail-dots-layer { pointer-events: none !important; }
#loading { display: flex; background: rgba(255,255,255,1); backdrop-filter: blur(10px); }
.gallery-header-info { display: block; }
.review-mode .gallery-header-info { display: none; }
.modal-enter { animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.nav-btn { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 20px 15px; cursor: pointer; transition: 0.2s; backdrop-filter: blur(4px); border-radius: 12px; }
.nav-btn:hover { background: rgba(255,255,255,0.3); }
.fs-action-btn { backdrop-filter: blur(12px); }
#toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(0, 0, 0, 0.85); color: white; padding: 12px 24px; border-radius: 99px; font-size: 14px; opacity: 0; transition: all 0.3s ease; transform: translateY(20px) scale(0.95); backdrop-filter: blur(8px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); pointer-events: auto; font-weight: 500; }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.pickup-option { border: 2px solid #f3f4f6; border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.2s; text-align: left; display: flex; align-items: center; gap: 16px; background: white; }
.pickup-option:hover { border-color: #e5e7eb; background-color: #f9fafb; transform: translateY(-1px); }
.pickup-option.selected { border-color: #18181b; background-color: #fafafa; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.pickup-circle { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.pickup-option.selected .pickup-circle { border-color: #18181b; background-color: #18181b; }
.pickup-circle::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; display: none; }
.pickup-option.selected .pickup-circle::after { display: block; }
/* [FIX] Fullscreen Modal 100dvh for mobile address bar fix */
#fullscreen-modal { height: 100dvh; max-height: -webkit-fill-available; }
#fullscreen-img { transform-origin: center center; touch-action: none; will-change: transform; cursor: grab; max-height: 100%; max-width: 100%; object-fit: contain; }
#fullscreen-img:active { cursor: grabbing; }

/* Generator Grid Styles */
#gen-capture-wrapper { width: 100%; max-width: 640px; margin: 20px auto; background-color: white; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
#gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; align-items: stretch; }
.gen-grid-item { 
    background-color: #f3f4f6; 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 2px; 
    aspect-ratio: 1 / 1; 
    width: 100%; 
    touch-action: none; /* [FIX] Prevent scrolling while dragging */
}
.gen-grid-item.empty::after { content: '+'; font-size: 30px; color: #cbd5e1; }
.gen-grid-item.selected { box-shadow: 0 0 0 3px #000; z-index: 20; position: relative; }
.gen-grid-item.drag-over { background-color: #e0e7ff; box-shadow: inset 0 0 0 3px #6366f1; }
.gen-grid-item img { 
    position: absolute; 
    pointer-events: none; 
    transform-origin: center center; 
    max-width: none !important; /* Prevent parent constraints */
}

/* Generator Tray Styles */
.tray-item { 
    width: 80px; 
    height: 80px; 
    border-radius: 12px; 
    overflow: hidden; 
    flex-shrink: 0; 
    cursor: grab; 
    border: 2px solid transparent; 
    transition: all 0.2s; 
    background: #f3f4f6; 
    position: relative; 
}
.tray-item:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.tray-item.selected-in-tray { border-color: #000; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }
.tray-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tray-item:active { cursor: grabbing; }